6

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

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

代替

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

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

4

3 回答 3

10

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

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

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

于 2012-04-17T14:06:12.593 回答
1

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

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

于 2012-04-17T14:07:37.207 回答
1

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

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

$("p").css("color", "blue");  
$("p").text("Text changed!");
于 2012-04-17T14:08:07.130 回答