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://www.bootcdn.cn/jquery/

<!--新浪 CDN-->
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<!--百度 CDN-->
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<!--Bootstrap CDN-->
http://www.bootcdn.cn/jquery/

减小DOM操做

虽然javascript性能上有了很大的提高，可是DOM操做仍是很耗费资源的，须要减小对DOM操做。当在一个页面中插入大量的元素的时候，尤为重要。例如：

<div id="elem" ></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 id="peanutButter" >
<div id="jelly" class=".jellyTime" ></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对象

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

<ul id="pancakes" >
         <li>first</li>
         <li>second</li>
         <li>third</li>
         <li>fourth</li>
         <li>fifth</li>
</ul>

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：

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

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:

<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');

结果：

能够看到经过数组实现方式遍历，执行效率更高。

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

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