有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力。随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运行等问题。
因此我们有必要对我们自己书写的jquery代码进行优化,以达到更快捷、更流畅的运行效果。
jquery性能优化高级技巧,下面主要从七个方面对jquery性能优化做介绍:
1.通过CDN(Content Delivery Network)引入jQuery库
2.减少DOM操作
3.适当使用原生JS
4.选择器优化
5.缓存jQuery对象
6.定义一个可以复用的函数
7.用数组方式来遍历jQuery 对象集合
下面详解每一个方法的具体说明:
通过CDN(Content Delivery Network)引入jQuery库
要提升网站中javascript的性能的最简单的一步就是引入最新版本的jQuery库,新发布的版本通常在性能上会有更好的提升而且也修复了一下bug。或者通过CDN引入也是很好的选择,通过CDN引入能够减少网站的加载时间。
以下是一些CDN服务:
<!-- Case 1 - jQuery CDN --><script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script><!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script><!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script><!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --><script src="http://code.jquery.com/jquery.min.js" ></script>一些国内的CDN服务:
http://plex here}$('#menuButton' ). click(showMenu);$('#menuLink' ). click(showMenu);如果定义一个内联(inline)回调函数同时这个包含多个元素的jQuery对象(正如上面所说的第一个例子),对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。
用数组方式来遍历jQuery 对象集合
你或许没有注意到,但是在性能方面,对于jQuery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jQuery对象。就是通过数组来实现,jQuery对象集合就是一个类数组,具有length和value属性。可以通过程序来测试一下性能:
HTML:
<ul id="testList" > <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <!-- add 50 more --></ul>JS:
var arr = $('li'), iterations = 100000;//------------------------------// Array实现: console.time('Native Loop');for (var z = 0; z < iterations; z++) { var length = arr.length; for (var i = 0; i < length; i++) { arr[i]; }}console.timeEnd('Native Loop');//------------------------------// each实现: console.time('jQuery Each');for (z = 0; z < iterations; z++) { arr.each(function(i, val) { this; });}console.timeEnd('jQuery Each');结果:
可以看到通过数组实现方式遍历,执行效率更高。
//-------------------------------------------------------持续更新...
以上是一些搜集知识的总结,如有任何建议或疑问,欢迎留言讨论。