jQuery性能优化_H5之家 - 中国HTML5教程资源分享第一站

之前，我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到另一个影响网站性能的部分--CPU利用率。使用 jQuery和其他JavaScript框架，使节点选择和DOM操作变得越来越容易，如果使用不当，有可能影响整个网页的响应速度，下面列举11个更有效的使用jQuery库的方法。

1、总是使用#id去寻找element.

在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素

<div id="content">  
    <form method="post" action="/">  
        <h2>Traffic Light</h2>  
        <ul id="traffic_light">  
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>  
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>  
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>  
        </ul>  
        <input class="button" id="traffic_button" type="submit" value="Go" />  
    </form>  
</div>

选择button的性能不好的一种方式：

var traffic_button = $('#content .button');

取而代之的是直接选择button:

var traffic_button = $('#traffic_button');

2、在Classes前面使用Tags

在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

<div id="content">  
    <form method="post" action="/">  
        <h2>Traffic Light</h2>  
        <ul id="traffic_light">  
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>  
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>  
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>  
        </ul>  
        <input class="button" id="traffic_button" type="submit" value="Go" />  
    </form>  
</div>

总是在一个Class前面加上一个tag名字（记得从一个ID传下来）

var active_light = $('#traffic_light input.on');

注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。例如，它会因为去循环所有的<div>元素去寻找ID为content的<div>，而导致很慢。

var content = $('div#content');

按照同样的思路，从多个ID传下来是冗余的。

var traffic_light = $('#content #traffic_light');

3、缓存jQuery对象

养成保存jQuery对象到一个变量上（就像上面的例子）的习惯。例如，不要这样做：

$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

取而代之，首现保存jQuery变量到一个本地变量后，再继续你的操作。

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

提示：使用$前辍表示我们的本地变量是一个jQuery包集。记住，不要在你的应该程序里出现一次以上的jQuery重复的选择操作。额外提示：延迟存储jQuery对象结果。

如果你想在你的程序的其它地方使用jQuery结果对象（result object(s)），或者你的函数要执行多次，要把它缓存在一个全局范围的对象里。通过定义一个全局容器保存jQuery结果对象，就可以在其它的函数里引用它。

// Define an object in the global scope (i.e. the window object)  
window.$my =  
{  
    // Initialize all the queries you want to use more than once  
    head : $('head'),  
    traffic_light : $('#traffic_light'),  
    traffic_button : $('#traffic_button')  
};  
 
function do_something()  
{  
    // Now you can reference the stored results and manipulate them  
    var script = document.createElement('script');  
    $my.head.append(script);  
 
    // When working inside functions, continue to save jQuery results  
    // to your global container.  
    $my.cool_results = $('#some_ul li');  
    $my.other_results = $('#some_table td');  
 
    // Use the global functions as you would a normal jQuery result  
    $my.other_results.css('border-color', 'red');  
    $my.traffic_light.css('border-color', 'green');  
}

4、更好的利用链

前面的例子也可以这样写：

var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){...})  
    .css('border', '3px dashed yellow')  
    .css('background-color', 'orange')  
    .fadeIn('slow');

这样可以让我们写更少的代码，使JavaScript更轻量。

5、使用子查询

jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

<div id="content">  
    <form method="post" action="/">  
        <h2>Traffic Light</h2>  
        <ul id="traffic_light">  
            <li><input type="radio" class="on" name="light" value="red" /> Red</li>  
            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>  
            <li><input type="radio" class="off" name="light" value="green" /> Green</li>  
        </ul>  
        <input class="button" id="traffic_button" type="submit" value="Go" />  
    </form>  
</div>

例如，我们可以利用子查询缓存active和inactive lights以便后面的操作。

var $traffic_light = $('#traffic_light'),  
    $active_light = $traffic_light.find('input.on'),  
    $inactive_lights = $traffic_light.find('input.off');

提示：可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节。