有时候我们在书写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="https://code.jquery.com/jquery-1.10.2.min.js" ></script> <!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) --> <script src="https://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="https://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="https://code.jquery.com/jquery.min.js" ></script>
一些国内的CDN服务：
<!--新浪 CDN--> <script src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <!--百度 CDN--> <script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--Bootstrap CDN-->
减少DOM操作
虽然javascript性能上有了很大的提升，但是DOM操作还是很耗费资源的，需要减少对DOM操作。当在一个页面中插入大量的元素的时候，尤其重要。
例如：
<div ></div> // 不好的方式 //var elem = $('#elem'); //for(var i = 0; i < 100; i++){ // elem.append('<li>element '+i+'</li>'); //} // 好的方式 var elem = $('#elem' ), arr = []; for(var i = 0; i < 100; i++){ arr. push('<li>element ' +i+'</li>' ); } 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:
<div > <div ></div> </div> JS: //测试程序 var iterations = 10000, i; //-------------------------------------------- //Case 1: 很慢 console.time('Fancy'); for (i = 0; i < iterations; i++) { $('#peanutButter div:first'); } console.timeEnd('Fancy'); //-------------------------------------------- //Case 2: 比较好，但仍然很慢 console.time('Parent-child'); for (i = 0; i < iterations; i++) { $('#peanutButter div'); } console.timeEnd('Parent-child'); //-------------------------------------------- //Case 3: 一些浏览器会比较快 console.time('Parent-child by class'); for (i = 0; i < iterations; i++) { // 通过后代Class选择器 $('#peanutButter .jellyTime'); } console.timeEnd('Parent-child by class'); //-------------------------------------------- //Case 4: 更好的方式 console.time('By class name'); 21 for (i = 0; i < iterations; i++) { // 直接通过Class选择器 $('.jellyTime'); } console.timeEnd('By class name'); //-------------------------------------------- //Case 5: 推荐的方式 ID选择器 console.time('By id'); for (i = 0; i < iterations; i++) { $('#jelly'); } console.timeEnd('By id');
执行结果：
缓存jQuery对象