jQuery提升性能技巧及个人总结

1、将jquery对象缓存起来：在for循环中，不要每次都要访问数组的length属性，我们应该先将对象缓存进一个变量然后再操作，如下所示：

var myLength = myArray.length; 
for (var i = 0; i < myLength; i++) { 
// 要做的事 
}

代码块中，要缓存对象：

$('#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');

2、在循环外使用append，DOM操作应越少越好：进行DOM操作是有代价的，如果需要往DOM中添加大量元素，你应该一次批量完成，而不是一次一个。

// 别这样

$.each(reallyLongArray, function(count, item) { 
var newLI = '<li>' + item + '</li>'; 
$('#ballers').append(newLI); 
});

//较好的做法

var frag = document.createDocumentFragment(); 
$.each(reallyLongArray, function(count, item) { 
var newLI = '<li>' + item + '</li>'; 
frag.appendChild(newLI[0]); 
});

$('#ballers')[0].appendChild(frag);不要在each()里用$('#id')的选择器，会有多次遍历查找dom元素，效率极低用document.createDocumentFragment()来减少页面的DOM结构改变的次数、刷新的次数。

// 或者这样

var myHtml = ''; 
$.each(myArray, function(i, item) { 
html += '<li>' + item + '</li>'; 
}); 
$('#ballers').html(myHtml);

3、保持简洁风格

// 不理想

if ($ventfade.data('currently') != 'showing') { 
$ventfade.stop(); 
} 
if ($venthover.data('currently') != 'showing') { 
$venthover.stop(); 
} 
if ($spans.data('currently') != 'showing') { 
$spans.stop(); 
}

// 较好的

var elems = [$ventfade, $venthover, $spans]; 
$.each(elems, function(k, v) { 
if (v.data('currently') != 'showing') { 
v.stop(); 
} 
})

4、优化选择器

节点选择和DOM操作, 根据给定的ID匹配一个元素总是使用#id去寻找element

// 非常快

$('#container div.robotarm');

// 超级快

$('#container').find('div.robotarm');

使用$.fn.find方法更快一些，因为第一个选择器是无须经过选择器引擎处理，在jquery中最快的选择器是ID选择器.因为它直接来自于Javascript的getElementById()方法，这是非常快，因为它是原产于浏览器。如果你需要选择多个元素，这必然会涉及到DOM遍历和循环，为了提高性能，建议从最近的ID开始继承。

具体指定选择器的右侧部分应该尽可能具体，左侧则不需要那么具体。

// 未优化

$('div.data .gonzalez');

// 优化后

$('.data td.gonzalez');

如果可以，尽量在选择器靠右侧的部分使用tag.class，而左侧只有tag或者只有.class。

避免过度的具体

$('.data table.attendees td.gonzalez');

// 不写中间的会更好

$('.data td.gonzalez');

清爽的DOM结构也有助于改善选择器的性能，选择器引擎可以少跑几层去寻觅那个元素了。

5、避免使用无定向通配符选择器

$('.buttons > *'); // 极慢 
$('.buttons').children(); // 快很多 
$('.gender :radio'); // 无定向搜索 
$('.gender *:radio'); // 同上 
$('.gender input:radio'); // 这样 好很多

6、当大量元素修改CSS，应该使用样式表

如果你在用$.fn.css给多于20个元素修改CSS，考虑一下添加一个style标签，这样可以速度可以提升60 % 。

// 多于20个 明显慢

$('a.swedberg').css('color', '#asd123'); 
$('<style type="text/css">a.swedberg { color : #asd123 }</style>').appendTo('head');

7、使用$.data而不是$.fn.data：将$.data应用于DOM元素比直接调用jQuery选择结果的$.fn.data要快上10倍

// 常用

$(elem).data(key, value);

// 快十倍

$.data(elem, key, value);

//快于第二种(非jQuery)

elem.key=value;

8、别费时间在空白的选择结果上

jQuery将不会告诉你，如果你想运行的代码在一个空选择上，它会继续运行，好像没有什么错，但影响性能。

//太遭了，执行了三个方法后才意识到里面是空的

$('#nosuchthing').slideUp();

// 较好

var $mySelection = $('#nosuchthing'); 
if ($mySelection.length) { 
mySelection.slideUp(); 
}

// 最佳: add a doOnce plugin

jQuery.fn.doOnce = function(func) { 
this.length && func.apply(this); 
return this; 
} 
$('li.cartitems').doOnce(function() { 
// make it ajax! \o/ 
});

这层保护是适用于jQuery UI widget，因为即使操作的元素为空其开销也不少。

9、条件判断

// 旧方法

if (type == 'foo' || type == 'bar') {... 
}

// 好方法

if (/^(foo|bar)$/.test(type)) {... 
}

// 查找对象

if (({ 
foo: 1, 
bar: 1 
})[type]) {... 
}

10、使用最新的JQuery版本

11、返回false防止默认行为

$('popup').click(function(){ 
// Launch popup code 
return false; 
});

参考链接：

/article/1256379.html

http://blog.benhuoer.com/posts/10-tips-for-jquery-performance.html

http://docs.jquery.com/Main_Page