性能：纯CSS vs jQuery

问题描述

我已经看到了纯CSS和等价jQuery之间的一些代码比较。但我正在寻找有关为什么纯CSS的确切速度比jQuery更快的细节。

这里有一些原因我看到，但这些描述不是深入。

• CSS不必由浏览器评估


• jQuery必须由浏览器评估


• jQuery处理脚本语言

不是CSS必须由浏览器评估，也通过脚本语言？ CSS不像jQuery一样需要遍历DOM，或者CSS有一些优势吗？

解决方案

• CSS是一种你编写你的样式表的语言，然后必须由浏览器加载，解析和评估;




• 是，是因为




• 是的。 jQuery是用JavaScript编写的，像CSS一样，它是一种必须由浏览器解析和评估的语言;

它必须由浏览器评估，但作为一种语言，以类似于布局引擎的其他核心语言特征的本地代码实现，例如HTML解析器和JavaScript引擎。 CSS实现不通过脚本语言实现（除非布局引擎本身是由一个脚本语言编写的）。

CSS样式通过CSSOM暴露给脚本语言，这不是CSS实现本身，只是一个脚本API，你可以考虑作为一个CSS等效于HTML的DOM。

jQuery是用JavaScript编写的，然后由浏览器的JavaScript实现运行。如果你使用jQuery来应用CSS，那么jQuery必须访问DOM和CSSOM，它们再次在JavaScript中实现，浏览器必须运行它们。

这是类似的使用jQuery选择器与本机Selectors API。 jQuery选择器在（一个JavaScript选择器库）中实现， document.querySelector（）是一个DOM方法，允许您直接从脚本中使用浏览器的本机实现的选择器引擎。

I've seen a number of code comparisons between pure CSS and the equivalent jQuery. But I'm looking for details about why pure CSS is definitively faster than jQuery.

Here's are some of the reasons I've seen but these descriptions are not in-depth. I'm not sure if they are even true.

• CSS doesn't have to be evaluated by the browser
• jQuery has to be evaluated by the browser
• jQuery goes through a scripting language

Doesn't CSS have to be evaluated by the browser and also goes through a scripting language? Doesn't CSS have to walk the DOM like jQuery or does CSS have some advantage there?

解决方案

• No. CSS is a language that you write your stylesheets in, which then have to be loaded, parsed and evaluated by the browser; see below.

• Yes, because...

• Yes. jQuery is written in JavaScript which, like CSS, is a language which has to be parsed and evaluated by the browser; again, see below.

It has to be evaluated by the browser, but as a language in its own right, it's implemented in native code similarly to the other core language features of a layout engine, like an HTML parser and a JavaScript engine. CSS implementation does not happen through a scripting language (unless, of course, the layout engine itself is written in one).

CSS styles are exposed to scripting languages via the CSSOM, which is not the CSS implementation itself, just a scripting API which you could consider as sort of a CSS equivalent to the DOM for HTML.

jQuery is written in JavaScript, which is then run by the browser's JavaScript implementation. If you use jQuery to apply CSS, then jQuery has to access the DOM and CSSOM, which are again implemented in JavaScript, which the browser has to run.

This is similar to using jQuery selectors versus the native Selectors API. jQuery selectors are implemented in Sizzle, a JavaScript selector library, while document.querySelector() is a DOM method that allows you to use a browser's natively-implemented selector engine directly from a script.

这篇关于性能：纯CSS vs jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！