你的位置:首页 > 软件开发 > Java > 新手必看的jQuery优化笔记十则

新手必看的jQuery优化笔记十则

发布时间:2015-12-26 16:00:13
jQuery优化1.简介 jQuery正在成为Web开发人员首选的JavaScript库,作为Web开发者,除了要了解语言和框架的应用技巧外,如何提升语言本身的性能也是开发人员应该思考的问题。文章就以jQuery为例,为大家提供了10个有效提升jQuery性能的小技巧。2. ...

jQuery优化

1.简介 

var array = new Array (); for (var i = 0; i < 10000; i++) { array[i] = 0; } console.time('native'); //原生for函数 var l = array.length; for (var i = 0; i < l; i++) { array[i] = i; } console.timeEnd('native'); console.time('jquery'); //jQuery的each方法 $.each(array, function(i) { array[i] = i; }); console.timeEnd('jquery'); 
新手必看的jQuery优化笔记十则

结果显示原生代码只需2毫秒就做到的事,利用jQuery的each方法需要26毫秒。而且这还只是我在本机上测试一个基本上啥也没做的函数的结果,当遇到更复杂的情况,例如设置css属性或DOM操作时,时间差异肯定更大。 

4. 用ID替代class选择器

利用ID选择对象要好得多,因为这时jQuery会使用浏览器的原生函数getElementByID()来获取对象,查询速度很快。因此,比起利用那些方便的css选择技巧,使用更为复杂的选择器也是值得的(jQuery也为我们提供了复杂选择器)。

你也可以手工书写自己的选择器(其实比你想象中简单),或者为你想要选择的元素指定一个有ID的容器。

新手必看的jQuery优化笔记十则
$('#item').css('color', '#123456'); $('#item').html('hello'); $('#item').css('background-color', '#ffffff'); // 这样写更好 $('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff'); // 甚至这样 var item = $('#item'); item.css('color', '#123456'); item.html('hello'); item.css('background-color', '#ffffff'); // 遇到循环,这样做非常不好 console.time('no cache'); for (var i = 0; i < 1000; i++) { $('#list').append(i); } console.timeEnd('no cache'); // 下面这样要好得多 console.time('cache'); var item = $('#list'); for (var i = 0; i < 1000; i++) { item.append (i); } console.timeEnd('cache'); 
新手必看的jQuery优化笔记十则

 

即使是相对较短的迭代,缓存的效果还是很明显的。

7. 避免DOM操作

DOM操作应该越少越好,因为诸如prepend(),append(),after()的插入动作都很费时。上面的例子如果用html()会更快:

新手必看的jQuery优化笔记十则
var array = []; for (var i = 0; i <= 10000; i++) { array[i] = '<li>' + i + '</li>'; } $('#list').html(array.join ('')); 
新手必看的jQuery优化笔记十则

 

9. 返回false值

您可能已经注意到,如果函数执行后不返回false,你就会被跳转到页面顶部。如果页面较长,这种反应是很烦人的。所以,与其这样:

$('#item').click(function() { // stuff here }); 
$('#item').click(function() { // stuff here return false; ); 
新手必看的jQuery优化笔记十则

10. 研究 

这条建议并不直接提升函数的执行速度,不过如果你肯花时间在这上面,研究研究这些小抄和参考文档,你将来定能节约很多时间。


原标题:新手必看的jQuery优化笔记十则

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录