jquery性能优化

一、选择器性能优化建议

1. #id选择器来继承

总是从#id选择器来继承 这是jQuery选择器的一条黄金法则
jQuery选择一个元素最快的方法就是用ID来选择

$(‘#content’).hide();

也可以从ID选择器继承来选择多个元素:

$(‘#content p’).hide();

2. 在class前面使用tag

jQuery中第二快的选择器就是tag选择器（如$(‘head’)）
因为它和直接来自于原生的Javascript方法getElementByTagName()
所以最好总是用tag来修饰class(并且不要忘了就近的ID)

varreceiveNewsletter = $(‘#nslForm input.on’);

jQuery中class选择器是最慢的，因为在IE 浏览器 下它会遍历所有的DOM节点
尽量避免使用class选择器 也不要用tag来修饰ID 下面的例子会遍历所有的div元素来查找id为’content’的那个节点：

varcontent = $(‘div#content’);// 非常慢，建议不要使用

用ID来修饰ID也是画蛇添足：

vartraffic_light = $(‘#content #traffic_light’);// 非常慢，建议不要使用

3. 使用子查询

将父对象缓存起来以备将来的使用

varheader = $(‘#header’);
varmenu = header.find(‘.menu’);
// 或者
varmenu = $(‘.menu’, header);

4. 优化选择器以适用Sizzle的“从右至左”模型

自版本1.3之后，jQuery采用了Sizzle库，与之前的版本在选择器引擎上的表现形式有很大的不同
它用“从左至右”的模型代替了“从右至左”的模型 确保最右的选择器具体些，
而左边的选择器选择范围较宽泛些：

var linkContacts = $(‘.contact-links div.side-wrapper’);

var linkContacts = $(‘a.contact-links .side-wrapper’);

5. 采用find()，而不使用上下文查找

.find()函数的确快些 但是如果一个页面有许多DOM节点时，需要来回查找时，可能需要更多时间:

vardivs = $(‘.testdiv’,’#pageBody’);// 2353 on Firebug 3.6
vardivs = $(‘#pageBody’).find(‘.testdiv’);// 2324 on Firebug 3.6 – The best time
vardivs = $(‘#pageBody .testdiv’);// 2469 on Firebug 3.6

6.链式操作

采用jQuery的链式操作比缓存选择器更有效：

$(‘li.menu-item’).click(function() {alert(‘test click’);})
.css(‘display’,’block’)
.css(‘color’,’red’)
fadeTo(2, 0.7);

不要让相同的选择器在你的代码里出现多次：
为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上$符号。

7.数组方式使用jqury对象

使用jqury选择器获取结果是一个jqury对象，然而，jquery类库会让你感觉你正在使用一个定义了索引和长度的数组，

在性能方面，建议使用简单for或者while循环来处理，而不是$.each(); 这样能使你的代码更快。

$.each(array,function(i){
    array[i] = i;
})
使用for代替each方法：
var array = new Array();
for(var i = 0; i<array.length; i++){
    array[i] = i;
}