jQuery性能优化

之前，我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到另一个影响网站性能的部分–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” name=”light” value=”red” /> Red</li>
<li><input type=”radio” name=”light” value=”yellow” /> Yellow</li>
<li><input type=”radio” name=”light” value=”green” /> Green</li>
</ul>
<input id=”traffic_button” type=”submit” value=”Go” />
</form>
</div>

选择button的性能不好的一种方式：
var traffic_button = $(‘#content .button’);

取而代之的是直接选择button:
var traffic_button = $(‘#traffic_button’);

选择多个元素

在我们讨论选择多个元素的时候，我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失， 总是使用最近的父ID去寻找。

var traffic_lights = $(‘#traffic_light input’);

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” name=”light” value=”red” /> Red</li>
<li><input type=”radio” name=”light” value=”yellow” /> Yellow</li>
<li><input type=”radio” name=”light” value=”green” /> Green</li>
</ul>
<input 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