jQuery 选择器效率

原文地址：http://www.cnblogs.com/aaronjs/p/3337531.html

ID > Tag > Class

• ID 选择器是速度最快的，这主要是因为它使用 JavaScript 的内置函数 getElementById()；
• 其次是类型选择器，因为它使用 JavaScript 的内置函数 getElementsByTag()；
• 速度最慢的是 Class 选择器，其需要通过解析 HTML 文档树，并且需要在浏览器内核外递归，这种递归遍历是无法被优化的。

 

选择器性能优化建议

• 尽量使用 ID 选择器
• 少直接使用 Class 选择器，尽量结合 Tag 使用，如  input.myclass
• 多用父子关系，少用嵌套关系
• 缓存 jQuery 对象
• 链式调用

性能分析

　　1 > 2 > 3 > 4 > 5 > 6

　　

$parent.find('.child')       //   1  
$('.child', $parent)         //   2  
$('.child', $('#parent'))    //   3  
$parent.children('.child')   //   4  
$('#parent > .child')        //   5  
$('#parent .child')          //   6  

 

1. 这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。

 

2. 给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%。

 

3. jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%。

 

4. 这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%

 

5. jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。

 

6. 这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。