性能：纯CSS vs jQuery

我已经看到了一些纯CSS和等效jQuery之间的代码比较。但我想了解为什么纯CSS比jQuery快得多的细节

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

• CSS不必由浏览器评估
• jQuery必须由浏览器进行评估
• jQuery使用脚本语言

---

CSS不需要通过浏览器进行评估，也需要通过脚本语言进行评估吗？CSS不必像jQuery一样在DOM中运行，还是CSS在这方面有一些优势？

我认为

CSS

之所以更快，主要是因为它比

javascript

更优化，因为它不太复杂，代码只是一系列规则，没有太多自己的逻辑（除了选择器和偶尔使用的

calc（）

函数）顺便说一句，

CSS

肯定需要由浏览器进行评估。

• CSS不必由浏览器评估
  不可以。CSS是一种编写样式表的语言，浏览器必须加载、解析和计算样式表；请参见下文

• jQuery必须由浏览器进行评估
  是的，因为

• jQuery使用脚本语言
  是的。jQuery是用JavaScript编写的，与CSS一样，JavaScript也是一种必须由浏览器解析和评估的语言；同样，请参见下文

CSS不需要通过浏览器进行评估，也需要通过脚本语言进行评估吗

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

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

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

---

这类似于使用jQuery选择器而不是原生选择器API。jQuery选择器在JavaScript选择器库中实现，而

document.querySelector（）

是一种DOM方法，允许您直接从脚本使用浏览器本机实现的选择器引擎。

这里有许多有用的信息：

请看本节：

这是：

链接：

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

样式表 另一方面，样式表有一个不同的模型 似乎因为样式表不会改变DOM树，所以没有 等待它们并停止文档解析的原因。存在 但是，在测试过程中，脚本请求样式信息的问题 文档分析阶段。如果尚未加载和分析样式，则 脚本将得到错误的答案，显然这导致了很多错误 问题。这似乎是一个边缘案例，但很常见。Firefox 当仍在使用样式表时，阻止所有脚本 已加载并已解析。Webkit仅在脚本尝试访问时才会阻止脚本 对于可能受卸载样式影响的某些样式特性 床单

---

相关：在99.9%的情况下，jQuery比使用本机JavaScript慢：我并不总是对CSS/jQuery性能的问题投赞成票，但当我这样做时……这是一个非常合理的问题。不像大多数问题只是问“X比Y快吗？”，你的问题包含了初步的研究和知识，并不是为了自身的利益而将苹果和橙子进行毫无意义的比较。我不明白为什么这个问题应该以非建设性的方式结束——绩效并不总是主观的，特别是当已经有事实支持问题及其结论时answers.CSS vs jQuery做什么？如果你在谈论动画/过渡，速度不如质量重要（在我的书中），因为时间应该是不变的。就我个人而言，我永远不会在CSS可以做的地方使用javascript，因为这会让你的脚本线程自由地做只能在脚本中完成的事情。（根据我的经验，CSS转换比javascript动画更平滑，但我不知道如何量化）。你说的主要原因是CSS语言和运行时（或实现？）内置在浏览器中，但许多jQuery完全是外部的，没有本地的（浏览器）boost？@4thSpace：基本上是的。还有更多，但这是一个精确的简化。嘿，你的回答太快了。我点击了添加评论，你已经回复：）谢谢！