jquery性能优化高级技巧

jquery性能优化做好，速度也很快，那么如何提高jquery性能呢，本篇文章给大家介绍jquery性能优化高级技巧，需要的朋友可以参考下

有时候我们在书写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服务：

一些国内的CDN服务：

 http://www.bootcdn.cn/jquery/  http://www.bootcdn.cn/jquery/

减少DOM操作

虽然javascript性能上有了很大的提升，但是DOM操作还是很耗费资源的，需要减少对DOM操作。当在一个页面中插入大量的元素的时候，尤其重要。

例如：

 
 // 不好的方式 //var elem = $('#elem'); //for(var i = 0; i <100; i++){ // elem.append('element '+i+'
'); //} // 好的方式 var elem = $('#elem' ), arr = []; for(var i = 0; i <100; i++){ arr. push('element ' +i+'
' ); } elem. append(arr. join('' ));

将所有的元素缓存起来一次插入性能上会有所提升，因为只触发页面一次重绘。对于CSS样式属性也是同样的道理。

更多阅读：前端页面卡顿？可能是DOM操作惹的祸，你需要优化代码

适当使用原生JS

创建jQuery对象会带来一些开销。所以，如果比较注重性能的话，尽可能使用原生的javascript。在某些方面可能会更容易理解和写更少的代码。例如：

 // 打印list中的li的id $('#colors li' ). each(function(){ //将$(this).attr('id')方法替换为直接通过ID属性访问 console. log(this. id); })

选择器优化

如果你需要更好的性能，但是仍然要用到jQuery，你可以在jQuery选择器优化做一些尝试。以下是一个测试程序，通过浏览器的控制台console.time 和console.timeEnd 方法来记录不同选择器执行时间。

HTML:

  
 JS: //测试程序 var iterations = 10000, i; //-------------------------------------------- //Case 1: 很慢 console.time('Fancy'); for (i = 0; i

执行结果：

缓存jQuery对象

每次通过选择器构建一个新的jQuery对象时，jQuery的核心部分的Sizzle引擎会遍历DOM然后通过对应的选择器来匹配真正的dom元素。这种方式比较低效，在现代浏览器中可以通过document.querySelector方法通过传入对应的Class参数来匹配对应的元素，不过IE8以下版本不支持此方法。一个提高性能的实践是通过变量缓存jQuery对象。例如：

  first
second
third
fourth
fifth

JS：

 // 不好的方式: // $('#pancakes li').eq(0).remove(); // $('#pancakes li').eq(1).remove(); // $('#pancakes li').eq(2).remove(); // ------------------------------------ // 推荐的方式: var pancakes = $('#pancakes li'); pancakes.eq(0).remove(); pancakes.eq(1).remove(); pancakes.eq(2).remove(); // ------------------------------------ // 或者: // pancakes.eq(0).remove().end() // .eq(1).remove().end() // .eq(2).remove().end();

定义一个可以复用的函数

直接上例子：

 HTML： Show Menu!

JS：

 //Bad: //这个会导致多个回调函数的副本占用内存 $('#menuButton, #menuLink' ). click(function(){ // ... }); //---------------------------------------------- //Better function showMenu(){ alert('Showing menu!' ); // Doing something complex here } $('#menuButton' ). click(showMenu); $('#menuLink' ). click(showMenu);

如果定义一个内联(inline)回调函数同时这个包含多个元素的jQuery对象（正如上面所说的第一个例子），对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。

用数组方式来遍历jQuery 对象集合

你或许没有注意到，但是在性能方面，对于jQuery each方法这种优雅实现是有代价的。有一个办法能够更快地遍历一个jQuery对象。就是通过数组来实现，jQuery对象集合就是一个类数组，具有length和value属性。可以通过程序来测试一下性能：

HTML:

  Item
Item
Item
Item
Item
Item
Item
Item
Item

JS:

 var arr = $('li'), iterations = 100000; //------------------------------ // Array实现： console.time('Native Loop'); for (var z = 0; z

结果：

可以看到通过数组实现方式遍历，执行效率更高。

//-------------------------------------------------------持续更新...

以上是一些搜集知识的总结，如有任何建议或疑问，欢迎留言讨论。

以上就是jquery性能优化高级技巧的详细内容，更多请关注0133技术站其它相关文章！

jquery性能优化高级技巧

相关文章

前端开发

置顶推荐

猜你喜欢