`
kylines
  • 浏览: 86229 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

Jquery代码性能优化(他山之石)

阅读更多
(一)优化jQuery的each函数
糟糕的代码:
someDivs.each(function() {  
 $('#anotherDiv')[0].innerHTML += $(this).text();  
}); 
在每一次遍历循环中都会搜寻anotherDiv 这个ID的元素两次获取innerHTML属性创建了一个jQuery对象,只是为了获取元素的text属性优化的代码:
var someDivs = $('#container').find('.someDivs'),  
 contents = [];  
 someDivs.each(function() {  
   contents.push( this.innerHTML );  
 }); 
$('#anotherDiv').html( contents.join('') );

这样,在each (for)方法,我们唯一要执行任务的关键是增加一个新的到一个数组…而不是查询DOM中,取代了元素两次获取innerHTML属性等。

(二)学会使用find选择器
jQuery有非常强大的Sizzle引擎来实现选择器,jQuery做了优化,他们能很好的工作,你一般不必担心太多。然而,我们可以稍微做一些改进,将可以使你的脚本略有提高。
一般在jquery中能不要用Sizzle引擎就不要用,当然前面说了只要有可能,就尽量使用.find()方法。比如:
// Fine in modern browsers, though Sizzle does begin "running"  
$('#someDiv p.someClass').hide();  
// Better for all browsers, and Sizzle never inits.    
 $('#someDiv').find('p.someClass').hide(); 
上面两行代码执行的结果是完全一样的,但是下面一句的效率要比上面一句的执行效率高。
现代浏览器(除IE6,IE7)都有QuerySelectorAll支持,能允许你像CSS选择器一样获取对象,而不需要用到jQuery中的Sizzle引擎。jQuery会在使用自己的引擎之前检查是否存在这个函数。
对于IE6/IE7,就需要jQuery使用Sizzle引擎,jQuery会把你的选择器转化成一个数组,并且通过从右往左来迭代匹配。通过正则表达式匹配页面每一个元素,所以你的可以尽量减少选择器的层级,尽可能的使用最右边的选择器,比如使用ID选择器等;这个规则和我们的css的查找规则是一直的,如果你要优化css选择器也要知道这个规则:从右往左来迭代匹配!
尺度把握:
1.保持代码简单
2.尽可能的使用find()查找,使用浏览器的原生查找函数
3.尽可能使用最右边的选择器,比如ID等
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics