JQuery性能优化

1不使用each

jQuery 的each循环比原生的for循环性能相差几十倍。

2 属性选择器选择

尽量使用ID，类型，类选择器，避免使用属性选择器。

尽量使用ID，类，类型选择器，避免属性选择器。ID，类，类型都有原生的方法，属性选择器需要遍历整个DOM，还需要读取每个节点的属性进行判断，性能很低。

尽量不使用祖孙的选择器，使用父子关系更为明确的选择器，也就是使用更能缩小范围的选择器，避免大量的遍历。

3 使用缓存

定义局部变量，缓存要使用多次的结果，一方面避免反复调用，反复在原型链上查找，另一方面局部变量可以加快访问速度。

$('#item').css ('color', '#123456');
$('#item').html ('hello');
$('#item').css ('background-color', '#ffffff');

改为：

$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');

// 或者
var item = $('#item');
item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');

4 避免频繁的DOM操作

修改DOM就会导致浏览器重新建立DOM树和渲染，而这在web中是非常耗时的操作。

var item = $('#list');

for (var i=0; i<1000; i++) {
item.append (i);
}

改为

var list = '';

for (var i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}

('#list').html (list);

或者

var list = [];

for (var i=0; i<1000; i++) {
list[i]= '<li>'+i+'</li>';
}
('#list').html (list.join(""));

再或者

var list = [];

for (var i=0; i<1000; i++) {
list[i]= '<li>'+i+'</li>';
}
('#list')[0].innerHTML =list.join("");

5 String连接优化

对于很大String的连接搓澡不要使用concat，使用数组的join