jQuery代码性能优化的10种方法

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

选择多个元素

在我们讨论选择多个元素的时候，我们真正需要知道的是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" 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');