jQuery 选择器性能

Posted 2023-03-05

【中文标题】jQuery 选择器性能

【英文标题】：jQuery selector performance

【发布时间】：2011-03-20 04:09:03

【问题描述】：

为什么 id 选择器比 jQuery 中的类选择器更快？

【参考方案1】：

jQuery 中最快的选择器是 ID 选择器 ($('#someid'))。这是因为它直接映射到原生 javascript 方法 getElementById()。

【讨论】：

...而且该方法肯定比遍历某个类的元素数组更快。

【参考方案2】：

关于Id Selector的这些点也可能对你有所帮助。

第 1 点：

在按

Id

搜索时，

不限定您的选择器。

按

Id

搜索使用浏览器原生的

getElementById

方法（

非常快

）

不好的方式

$("div#your-id")

最佳方式

$("#your-id")

第 2 点：

您应该始终缓存您的选择到某个变量

不好的方式

$("#myList").click( function() 
   $("#myList").hide(); 
);

最佳方式

var myList  = $("#myList");

myList.click( function() 
   myList.hide();  // No need to re-select #myList since we cached it
);

【参考方案3】：

浏览器能够比使用类更快地通过 Id 检索元素。给定一个 ID，使用 getElementById 时返回一个或零个元素。这使得浏览器可以跟踪页面中元素的 Id，从而通过 Id 提供快速搜索操作。

按类名搜索需要查找具有给定类名的所有元素。尽管有些浏览器支持getElementsByClassName，但在内部它们需要遍历整个 DOM 树来获取它们。

jQuery 选择器充当这些原生函数的包装器，与 getElementsByTagName、querySelector 或 querySelectorAll 等其他函数一起使用（它还附带一个名为 Sizzle 的选择器库，如果浏览器使用缺少必要的原生函数）。

如果多个元素具有此 ID，则不定义行为。

因为它们引用了具有特定 ID 的 DOM 元素。另外，应该有