【翻译】Jquery性能优化之选择器优化

　　原文链接：http://learn.jquery.com/performance/optimize-selectors/

　　如今，更多的浏览器已经实现了querySelectorAll方法，所以，前端在查找dom时使用选择器的消耗由jquery转移到了浏览器。选择器的优化已经没有以前那么重要了，但是，仍然还是有许多要点需要常记在心的。

　　基于id的选择器

　　选择器以id开始常常是一个最佳的选择。

// fast
$("#container div.robotarm");
 
// super-fast
$("#container").find("div.robotarm");

　　方法二效率更高，那是因为$("#container")是不需要经过Sizzle选择器引擎处理的，jquery对仅含id选择器的处理方式是直接使用了浏览器的内置函数document.getElementById()，所以其效率是非常之高的。

　　特征性

　　使一个选择器的右边更具有特征，相对而言，选择器的左边可以少一些特征性。

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

　　再选择器的右边尽可能使用"tag.class"类型的选择符，在选择器的左边直接使用标签选择符或类选择符即可。

　　(类似于css选择器，其匹配算法是从右至左的)

　　避免过度的约束

$(".data table.attendees td.gonzalez");
 
// better: drop the middle if possible   尽可能移除掉中间的
$(".data td.gonzalez");

　　另外，一个更为“扁平”的DOM结构，会使得选择器引擎在寻找元素时经过的层次数更少，因此这样也是有利于提高选择器的性能的。

　　避免使用全局的选择器

　　一个会被在多处地方成功匹配的选择器可能会消耗更多的性能。

$(".buttons > *");  // extremely expensive
$(".buttons").children();  // much better
 
$(".gender :radio");  // implied universal selection
$(".gender *:radio"); // same thing, explicit now
$(".gender input:radio"); // much better