jQuery 选择器性能

Question

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

Answer 1

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

Answer 2

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

第 1 点：

在按 Id 搜索时，不要限定您的选择器。

• 按 Id 搜索使用浏览器本机 getElementById 方法（非常快）

BAD Way

$("div#your-id")

BEST Way

$("#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
});

Answer 3

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

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

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

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

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