CSS 选择器性能，DOM 解析答案

【问题标题】：CSS Selectors performance, DOM ParsingCSS 选择器性能，DOM 解析
【发布时间】：2012-04-28 21:07:19
【问题描述】：

我的问题与触发 DOM 解析有关，我想知道为什么使用 CSS ID 选择器比使用类选择器更快。什么时候必须再次解析 DOM 树，我应该使用什么技巧和性能增强......另外，有人告诉我，如果我做类似的事情

var $p = $("p");  
$p.css("color", "blue"); 
$p.text("Text changed!");

而不是

$("p").css("color", "blue");  
$("p").text("Text changed!");

提高了性能，这对所有浏览器都适用吗？另外，我如何知道我的 DOM 树是否已被重新解析？

【问题讨论】：

仅CSS选择器解析性能就足够微观了。将 jQuery 解释不同选择器（CSS 或非 CSS）的不同方式混在一起只会让一切变得不必要地混乱。不值得为这些细微差别而烦恼。
artzstudio.com/2009/04/jquery-performance-rules列出了许多jquery性能改进的规则
另请注意，您可以使用方法链。所以你也可以通过$('p').css('').text('').morestuff() 来提高性能
是的，我对链接的唯一警告是，有时你会迷失在链中，也更难调试，除非有不同的技巧？我想我必须习惯它，这是 jQuery 做很多事情的方式。

标签： javascript jquery dom jquery-selectors

【解决方案1】：

好吧，#id 选择器比类选择器更快，因为： (a) 给定 id 值的元素只能有一个； (b) 浏览器可以保存一个地图id -> element，因此#id 选择器可以像单个地图查找一样快速工作。

接下来，上面建议的第一个选项肯定更快，因为它避免了第二次查找，从而将基于选择器的总查找时间减少了 2 倍。

最后，您可以使用 Chrome 开发者工具的 Selector Profiler（在 Profiles 面板中）来分析浏览器处理您页面中的选择器所花费的时间（匹配+ 将样式应用于匹配的元素。）

【讨论】：

嘿，不知道 Selector Profiler。谢谢！为我 +1。
只有 JavaScript 选择器库会将 CSS ID 选择器视为 getElementById() 调用，并检索具有匹配 ID 的第一个元素。严格来说，符合标准的 CSS 选择器引擎需要将具有给定 ID 的所有元素与该 ID 选择器匹配，即使有多个，所以如果浏览器持有这样的地图，它不会与这个特定的匹配过程相关。但是当然我们在这里谈论的是 jQuery...
@BoltClock'saUnicorn：我知道你喜欢规范:)，所以this one 说id 属性值在文档中必须是唯一。否则，在多个元素具有相同 id 值的情况下，浏览器行为是未定义的（如果使用 document.getElementById()，则更是如此。）
@AlexanderPavlov：那是 HTML，而不是 CSS，这解释了为什么 DOM 实现使用 document.getElementById()。不过，打得很好。
对错误的参考表示歉意。 The CSS2 spec ID Selectors chapter 表示“无论文档语言如何，都可以使用 ID 属性来唯一标识其元素。”

【解决方案2】：

我鼓励您在有疑问时进行自己的性能测试。您可以在此处获取有关如何执行此操作的更多信息：How do you performance test JavaScript code?。一旦您自己测试了性能，您将永远不会忘记结果。

特别是，在给定的 jquery 选择器上执行 $() 函数必须获得匹配的 DOM 节点。我不确定这是如何工作的，但我猜它是document.getElementById()、document.getElementsByTagName() 和其他人的组合。这有一个处理成本，不管它有多小，如果你只调用一次然后重用它，你可以节省一些处理时间。

【讨论】：

【解决方案3】：

ID 选择器比类选择器更快，因为只有一个元素具有 ID，但许多元素可以共享一个类，并且必须进行搜索。

下面的代码不必要地解析 DOM 两次，所以当然会慢一些：

$("p").css("color", "blue");  
$("p").text("Text changed!");

【讨论】：