javascript - CSS 选择器性能，DOM 解析

Question

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

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

代替

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

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

Answer 1

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

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

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