30

我已经看到了纯 CSS 和等效 jQuery 之间的许多代码比较。但我正在寻找有关为什么纯 CSS 肯定比 jQuery 快的详细信息。

以下是我看到的一些原因，但这些描述并不深入。我不确定它们是否是真的。

  • CSS 不必由浏览器评估
  • jQuery 必须由浏览器评估
  • jQuery 通过脚本语言

CSS不是必须由浏览器评估并且还需要通过脚本语言吗？CSS 不是必须像 jQuery 那样遍历 DOM 还是 CSS 在那里有一些优势？

4

3 回答 3

34

  • CSS 不必由浏览器评估

    不，CSS 是一种您编写样式表的语言，然后必须由浏览器加载、解析和评估；见下文。

  • jQuery 必须由浏览器评估

    是的，因为...

  • jQuery 通过脚本语言

    是的。jQuery 是用 JavaScript 编写的，与 CSS 一样，它是一种必须由浏览器解析和评估的语言；再次，见下文。

CSS不是必须由浏览器评估并且还需要通过脚本语言吗？

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

CSS 样式通过 CSSOM 暴露给脚本语言，这不是 CSS 实现本身，只是一个脚本 API，您可以将其视为类似于 HTML 的 DOM 的 CSS。

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

这类似于使用 jQuery 选择器与本地选择器 API。jQuery 选择器在Sizzle中实现，这是一个 JavaScript 选择器库，document.querySelector()它是一种 DOM 方法，允许您直接从脚本中使用浏览器本地实现的选择器引擎。

于 2013-05-21T17:27:46.263 回答
3

这里有很多有用的信息：

浏览器的工作原理 - 现代网络浏览器的幕后花絮

查看本节： http ://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

这：http ://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_scripts

从链接：

脚本

网络模型是同步的。作者希望在解析器到达标签时立即解析和执行脚本。文档的解析会暂停，直到脚本被执行。如果脚本是外部的，则必须首先从网络中获取资源——这也是同步完成的，解析会暂停，直到获取资源。这是多年来的模型，也在 HTML 4 和 5 规范中指定。作者可以将脚本标记为“延迟”，因此它不会停止文档解析并在解析后执行。HTML5 添加了一个将脚本标记为异步的选项，因此它将由不同的线程解析和执行。

样式表

另一方面，样式表有不同的模型。从概念上看，由于样式表不会更改 DOM 树，因此没有理由等待它们并停止文档解析。但是，在文档解析阶段要求样式信息的脚本存在问题。如果样式还没有加载和解析，脚本会得到错误的答案，显然这会导致很多问题。这似乎是一个边缘情况，但很常见。当样式表仍在加载和解析时，Firefox 会阻止所有脚本。Webkit 仅在脚本尝试访问可能受卸载样式表影响的某些样式属性时才阻止脚本。

于 2013-05-21T17:28:48.920 回答
0

我认为更快的主要原因CSS是因为它可以优化更多而不是javascript因为它不那么复杂，代码只是一系列规则并且没有太多自己的逻辑（除了选择器和偶尔的calc()功能）顺便说一句，CSS绝对必须由浏览器评估。

于 2013-05-21T17:27:00.880 回答