jquery name选择器_前端开发：jQuery选择器的性能优化技巧

现在做前端开发的，基本都会用jquery，相比原生的javascript，jquery的确提高了代码书写效率。

jQuery

很多新手朋友使用jquery往往只为了快速完成项目任务，而不太注意性能上的优化，但是菜鸟和高手的主要差别就细节之中，细微之处见高下。

我们知道在javascript的所有操作中，对Dom的操作是最耗时的，所以一切涉及Dom节点查找，定位，更改的操作都要尽可能的减少，下面是我在以往工作和培训中总结的一些选择器的优化技巧，希望给新入行的前端朋友一些启发。

1：减少dom的的操作

方法1的问题所在：循环100次，通过也采用append操作了dom节点100次

如果改为方法2，只操作dom节点1次，效率大大提升。

2：缓存jquery对象，不要让同样的选择器重复出现。

• first
• second
• third
• fourth
• fifth

方法1的问题所在：$('#pancakes li')这个方法的定位过程是这样，先查从html文档中查到id=pancakes的节点，然后再遍历所有的li标签，方法1写了三次$('#pancakes li')，同样的一个查询定位，执行了三次，不觉得浪费吗？

采用方法2的var $pancakes = $('#pancakes li');把查找到的节点保存在一个变量内存中，这样以后直接通过变量调用，而不用每次重新去定位查找。

3：尽量使用id选择器

• first
• second
• third
• fourth
• fifth

$( "#pancakes" )的速度优先$( ".pancakes-class" )

$( "#pancakes" ).find("li")的速度优于$( "#pancakes li" )

$( "#pancakes" ).children("li")的速度优于$( "#pancakes" ).find("li")

记住，选择器的速度是：Id > tag > class，所以能用Id的时候尽量用Id。

4：不要使用tag来修饰ID

var content = $("div#content");

这样一来，选择器会先遍历所有的div元素，然后匹配#content，直接用$("#content")效率更高。

5：属性选择器尽量用tag修饰来保证精确查到

$('p[name="pname"]')速度由于$('[name="pname"]')

6：避免过度的约束，约束的级别越少，查找速度越快。

$( ".data table.table-class td.td-class" );//效率低$( ".data td.td-class" );

尽量省略中间不必要的约束，否则会增加不必要的dom节点的定位搜索，注意子节点精确定位查的查找

效率更高，$( ".data td.td-class" )的速度优于$( ".data .td-class" );

如果这篇教程能帮助到各种小伙伴，帮忙转发一下，后续我会抽时间继续分享一些程序相关的经验和技巧。