(一)优化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等
分享到:
相关推荐
12种jQuery代码性能优化方法.pdf
jQuery性能优化(转)jQuery性能优化(转)jQuery性能优化(转)jQuery性能优化(转)jQuery性能优化(转)
《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...
《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台...
《超实用的jQuery代码段》精选近350个jQuery代码段,涵盖页面发中绝大多数要、技巧与方法,堪称*实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨设备、...
jquery easyui datagrid 性能优化,优化后可快速提升查询性能。唯一的缺陷就是不支持可编辑grid了。只需要在引入easyui.js后面引入此js即可。
Jquery性能优化指南,web前端开发中,写出更高质量的代码
50个jquery代码片段50个jquery代码片段
ajax的jquery代码,jquery代码,简单运用,适合初学者,经典!!!!!!!
JQuery性能优化 项目实践经验总结,大幅提升jquery性能
jQuery性能优化指南,相信你也有你的idea,请共享出来吧。
之前,我们减少字节数和...如今,我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架,使节点选择和DOM操作变得越来越容易,如果使用不当,有可能影响整个网页的响应速度。
jQuery性能优化指南.pdf
jquery 代码解决placeholder不换行,不居中问题
让你写出更高效的jquery代码。一篇指导你如何实现简洁高效率的代码。
JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南JQuery优化指南
Firebug控制台动态加载jquery脚本并执行jquery代码
50个常见的JQUery代码
jQuery代码着色高亮显示特效是一款基于highlight.js代码高亮插件制作简单的演示代码着色高亮显示。