Javascript jQuery选择器性能

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

jQuery中最快的选择器是id选择器（$（“#someid”）。这是因为它直接映射到本机JavaScript方法getElementById（）。

关于Id选择器的这些要点也可能对您有所帮助

第1点：

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

• 通过Id搜索使用浏览器原生的getElementById方法（非常快速）

坏方法

$("div#your-id")

$("#your-id")

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

var myList  = $("#myList");

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

最佳方式

$("div#your-id")

$("#your-id")

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

var myList  = $("#myList");

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

第2点：

您应该始终将所选内容缓存到某个变量中

坏方法

$("div#your-id")

$("#your-id")

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

var myList  = $("#myList");

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

最佳方式

$("div#your-id")

$("#your-id")

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

var myList  = $("#myList");

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

---

浏览器通过Id检索元素的速度比使用类快。给定一个Id，使用

getElementById

时返回一个或零个元素。这使得浏览器能够跟踪页面中元素的Id，从而提供按Id的快速搜索操作

按类名搜索使得有必要查找具有给定类名的所有元素。尽管有些浏览器支持

getElementsByClassName

，但在内部，它们需要遍历整个DOM树来获取它们

jQuery选择器充当这些本机函数的包装器，与其他函数一起使用，如

getElementsByTagName

、

querySelector

或

querySelectorAll

（它还附带一个名为

Sizzle

的选择器库，在浏览器缺少必要的本机函数时使用）

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

---

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

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