jquery 性能优化高级技巧

有时为了书写方便，忽视了程序执行中给客户端带来的压力。导致在低端浏览器的运行缓慢。

1>通过CDN引用jquery,能减少网站加载时间。http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

2>减少DOM操作，将元素缓存起来一次性插入比在一个页面中插入大量元素时性能有不小提升！

 1 //坏方法
 2 var inserted_ele = $('.ele'); 
 3 var img_list;
 4 for (var i=0;i<img_list.length;i++){
 5    inserted_ele.append("<div><img src='"+img_list[i]+"'></div>");
 6 }
 7 
 8 //好方法
 9 var inserted_ele = $('.ele'); 
10 var img_list;
11 var arr = [];
12 for(var i=0; i<img_list.length;I++){
13   arr.push("<div><img src='"+img_list[i]+"'></div>");
14 }
15 inserted_ele.append(arr.join('' ));

3>适当使用原生js

4>选择器优化

 1 <div id="peanutButter" >
 2 <div id="jelly" class=".jellyTime" ></div>
 3 </div>
 4 JS:
 5  
 6 //测试程序
 7 var iterations = 10000,
 8   i;
 9 //--------------------------------------------
10 //Case 1: 很慢
11 console.time('Fancy');
12 for (i = 0; i < iterations; i++) {
13   $('#peanutButter div:first');
14 }
15 console.timeEnd('Fancy');
16 //--------------------------------------------
17 //Case 2: 比较好，但仍然很慢
18 console.time('Parent-child');
19 for (i = 0; i < iterations; i++) {
20   $('#peanutButter div');
21 }
22 console.timeEnd('Parent-child');
23 //--------------------------------------------
24 //Case 3: 一些浏览器会比较快
25 console.time('Parent-child by class');
26 for (i = 0; i < iterations; i++) {
27   // 通过后代Class选择器
28   $('#peanutButter .jellyTime');
29 }
30 console.timeEnd('Parent-child by class');
31 //--------------------------------------------
32 //Case 4: 更好的方式 
33 console.time('By class name');
34 21
35 for (i = 0; i < iterations; i++) {
36   // 直接通过Class选择器
37   $('.jellyTime');
38 }
39 console.timeEnd('By class name');
40 //--------------------------------------------
41 //Case 5: 推荐的方式 ID选择器
42 console.time('By id');
43 for (i = 0; i < iterations; i++) {
44   $('#jelly');
45 }
46 console.timeEnd('By id');

5>缓存jQuery对象

1 <ul id="pancakes" >
2      <li>first</li>
3      <li>second</li>
4      <li>third</li>
5      <li>fourth</li>
6      <li>fifth</li>
7 </ul>

// 不好的方式:
// $('#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();

6>定义一个可复用的函数

1 <button id="menuButton" >Show Menu!</button>
2 <a href="#" id="menuLink" >Show Menu!</a>

 1 //Bad: 
 2 //这个会导致多个回调函数的副本占用内存
 3 $('#menuButton, #menuLink' ). click(function(){
 4 // ...
 5 });
 6 //----------------------------------------------
 7 //Better
 8 function showMenu(){
 9 alert('Showing menu!' );
10 // Doing something complex here
11 }
12 $('#menuButton' ). click(showMenu);
13 $('#menuLink' ). click(showMenu);

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

 1 <ul id="testList" >
 2   <li>Item</li>
 3   <li>Item</li>
 4   <li>Item</li>
 5   <li>Item</li> 
 6   <li>Item</li>
 7   <li>Item</li>
 8   <li>Item</li>
 9   <li>Item</li>
10   <li>Item</li>
11   <!-- add 50 more -->
12 </ul>

 1 var arr = $('li'),
 2   iterations = 100000;
 3 //------------------------------
 4 // Array实现：  
 5 console.time('Native Loop');
 6 for (var z = 0; z < iterations; z++) {
 7   var length = arr.length;
 8   for (var i = 0; i < length; i++) {
 9     arr[i];
10   }
11 }
12 console.timeEnd('Native Loop');
13 //------------------------------
14 // each实现：  
15 console.time('jQuery Each');
16 for (z = 0; z < iterations; z++) {
17   arr.each(function(i, val) {
18     this;
19   });
20 }
21 console.timeEnd('jQuery Each');

易读性虽然jquery更好，但是速度还是js更快