jQuery选择器优化

翻译自jQuery官网，原文：http://learn.jquery.com/performance/optimize-selectors/

选择器优化

    选择器的优化不再像以前那么重要了，因为现在越来越多的现代浏览器实现了 document.querySelectorAll()方法；这个负担从jQuery转移到了浏览器上；但是仍然有一些原则是应该记住的。

ID选择器

    以ID选择器开头性能总是最好的。

// 效率高
$( "#container div.robotarm" );
 
// 效率更高
$( "#container" ).find( "div.robotarm" );

.find() 方法效率更高，因为前面的$("#container")没有经过Sizzle选择器引擎的处理--只含有ID选择器的选择器是通过document.getElementById()来实现的。这样更高效，因为它是浏览器原生的方法。

更具体的选择器

    选择器的右边应该更具体，而左边应该更粗泛。

// 优化前
$( "div.data .gonzalez" );
 
// 优化后
$( ".data td.gonzalez" );

如果可能的话，在最右边的选择器应该使用tag.class形式的，而左边的应该只使用标签名或者类名。

避免太过具体的选择器

$( ".data table.attendees td.gonzalez" );
 
// 更好的写法，可能的话应该去掉中间多余的选择器
$( ".data td.gonzalez" );

简单的DOM结构可以提高选择器的性能，因为浏览器在寻找一个元素的时候要遍历的层次更少。

避免全局选择器

    如果选择器选择的元素在DOM中的匹配很多，那么性能可能会很低下。

$( ".buttons > *" ); // 性能很低
$( ".buttons" ).children(); // 这样性能会提高很多
 
$( ".category :radio" ); // 使用了全局的选择器
$( ".category *:radio" ); // 同样的毛病
$( ".category input:radio" ); // 这样写会好很多