jquery性能优化的高级技巧

时间：2021-09-08 来源：互联网编辑：宝哥软件园浏览：次

有时候我们在编写jquery的时候，为了编写代码的方便，往往会忽略程序执行过程中给客户端带来的压力。接下来就是运行速度慢，甚至无法在一些低端浏览器或者低端电脑上运行。

因此，我们有必要优化自己的jquery代码，以获得更快、更流畅的运行结果。

jquery性能优化的高级技巧。以下是jquery性能优化的七个方面：

1.通过内容交付网络引入jQuery库

2.减少DOM操作

3.本机JS的适当使用

4.选择器优化

5.缓存jQuery对象

6.定义一个可重用的函数

7.通过数组遍历jQuery对象的集合

以下是每个方法：的详细描述

通过内容交付网络引入jQuery库

提高网站中javascript性能最简单的一步就是引入最新版本的jQuery库。新发布的版本通常会提高性能并修复bug。或者通过CDN引入也是不错的选择，可以减少网站的加载时间。

以下是一些CDN服务：

！-案例1-jQuery CDN-script src=' http :http://code . jQuery.com/jQuery-1 . 10 . 2 . min . js '/script！-案例2 -向Googles CDN请求jQuery(注意协议)-脚本src=' http://Ajax . Google API.com/Ajax/libs/jQuery/1 . 10 . 2/jQuery . min . js '/脚本！-案例3 -请求最新的minor 1.10.x版本(仅缓存一小时)-脚本src=' http://Ajax . googleapis.com/Ajax/libs/jquery/1.10/jquery . min . js '/脚本！-案例4-请求绝对最新的jquery版本(谨慎使用)-脚本src=' http :http://code.jquery.com/jquery.min.js'/script一些国内CDN服务：

http://www.bootcdn.cn/jquery/!-Sina cdn-script src=' http :http://lib . sinapp.com/js/jquery/1 . 9 . 1/jquery-1 . 9 . 1 . min . js '/script！-百度cdn-script src=' http :http://libs . Baidu.com/jquery/1 . 9 . 1/jquery . min . js '/script！-bootstrapcn-http://www.bootcdn.cn/jquery/reduce DOM操作

虽然javascript性能有了很大的提升，但是DOM操作仍然非常耗费资源，减少DOM操作是很有必要的。当页面中插入大量元素时，这一点尤其重要。

例如：

div id=' elem '/div//bad way//var elem=$(' # elem ')；//for(var I=0；i 100I){//elem . append(' lie element ' I '/Li ')；//}//好办法var elem=$('#elem ')，arr=[]；for(var I=0；i 100我){arr。push(' lie element ' I '/Li ')；}elem。追加(arr。join(“”)；缓存所有元素并将其插入一次将提高性能，因为只触发了页面的一次重绘。CSS样式属性也是如此。

多看：首页卡住了？可能是DOM操作导致的，需要优化代码

正确使用本地JS

创建jQuery对象会带来一些开销。因此，如果您更注重性能，请尽可能使用本机javascript。在某些方面，理解和编写更少的代码可能更容易。例如：

//打印ID $ ('# colorsli ')。每个(函数(){//替换$(this)。访问控制台的attr('id ')方法。日志(这个。id)直接通过id属性；})选择器优化

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

HTML:

div id=' PeanButter ' div id=' jelly ' class=' .jellyTime' /div/divJS://测试程序定义变量迭代=10000，我；/////案例1:很慢控制台。时间('花式');for(I=0；我迭代；I){ $(' #花生酱div : first ')；}console.timeEnd('花式');/////案例2:比较好，但仍然很慢console.time('父子');for(I=0；我迭代；I){ $(' # PeanButter div ')；}console.timeEnd('父子');/////案例3:一些浏览器会比较快console.time('按类划分的父子');for(I=0；我迭代；i ) { //通过后代班级选择器$(' #花生酱jellyTime’)；}console.timeEnd('按类划分的父子');/////案例4:更好的方式console.time('按类名');21为(I=0；我迭代；i ) { //直接通过班级选择器$('.jellyTime’)；}console.timeEnd('按类名');/////案例5:推荐的方式身份选择器控制台。时间('按id ')；for(I=0；我迭代；我){ $(' #果冻');}控制台。时间结束(' By id ')；执行结果：

缓存jQuery对象

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

ul id='煎饼里第一张/li第二张/li第三张/li第四张/li第五张/li/ulJS:

//不好的方式：/$(' #煎饼里')。等式(0).移除();//$(' #煎饼李' .等式(1)。移除();//$(' #煎饼李' .等式(2)。移除();//- //推荐的方式：var煎饼=$(' #煎饼李’)；煎饼。等式(0).移除();煎饼。方程式(1 ).移除();煎饼。方程式(2 ).移除();//- //或者：//煎饼。等式(0).移除()。end()//.等式(1)。移除()。end()//.等式(2)。移除()。end()；定义一个可以复用的函数

直接上例子：

HTML:按钮id='菜单项按钮'显示菜单！/buttona href='#' id='menuLink '显示菜单！/aJS:

//Bad: //这个会导致多个回调函数的副本占用内存$(' #菜单按钮，#菜单链接')。单击(函数(){//.});//////更好的功能show menu(){ alert(' Showing menu！');//在这里做一些复杂的事情} $(' #菜单栏按钮').点击（显示菜单);$('#menuLink ').点击（显示菜单);如果定义一个内联（内嵌)回调函数同时这个包含多个元素的jQuery对象（正如上面所说的第一个例子),对于这个集合中的每个元素都会在内存中保存一个回调函数的副本。

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

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

HTML:

ul id='测试列表' Li it/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li/Li Li！-再增加50个- /ulJS:

var arr=$('li ')，迭代次数=100000;/////数组实现：控制台。时间(“本机循环”)；for(var z=0；z迭代；z){可变长度=arr。长度；for(var I=0；一、长度；我){ arr[I]；} }控制台。时间结束(“本机循环”)；/////每一个实现：控制台。时间('每个jQuery ')；for(z=0；z迭代；z ) { arr .每个(函数(我，瓦尔){这个；});}控制台。时间结束(' jQuery Each ')；结果：