1、循环中缓存length
var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
// do stuff
}
2、在循环外使用append,避免过于频繁操作DOM
// 别这样...
$.each(myArray, function(i, item) {
var newListItem = '<li>' + item + '</li>';
$('#ballers').append(newListItem);
});
// 好的做法是这样的
var frag = document.createDocumentFragment();
$.each(myArray, function(i, item) {
var newListItem = '<li>' + item + '</li>';
frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);
// 或者这样的
var myHtml = '';
$.each(myArray, function(i, item) {
html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);
3、保持代码的整洁干练,优化
// 丑
if ($eventfade.data('currently') != 'showing') {
$eventfade.stop();
}
if ($eventhover.data('currently') != 'showing') {
$eventhover.stop();
}
if ($spans.data('currently') != 'showing') {
$spans.stop();
}
// 漂亮!!
var $elems = [$eventfade, $eventhover, $spans];
$.each($elems, function(i,elem) {
if (elem.data('currently') != 'showing') {
elem.stop();
}
});
4、控制匿名函数,组织封装
// 纠结
$(document).ready(function() {
$('#magic').click(function(e) {
$('#yayeffects').slideUp(function() {
// ...
});
});
$('#happiness').load(url + ' #unicorns', function() {
// ...
});
});
// 清爽
var PI = {
onReady : function() {
$('#magic').click(PI.candyMtn);
$('#happiness').load(PI.url + ' #unicorns', PI.unicornCb);
},
candyMtn : function(e) {
$('#yayeffects').slideUp(PI.slideCb);
},
slideCb : function() { ... },
unicornCb : function() { ... }
};
$(document).ready(PI.onReady);
5、优化选择器
// 快
$('#container div.robotarm');
// 非常快
$('#container').find('div.robotarm');
选择器的右侧部分应该尽可能具体,左侧则不需要那么具体。
// 未优化的
$('div.data .gonzalez');
// 优化过的
$('.data td.gonzalez');
避免过度的具体
$('.data table.attendees td.gonzalez');
// 如果可以不写中间的部分会更好
$('.data td.gonzalez');
清爽的 DOM 结构也有助于改善选择器的性能, 选择器引擎可以少跑几层去寻觅那个元素了。
6、使用事件委托:
除了有性能提升的好处,事件委派也使你在往容器里添加新元素时无需重新绑定事件, 因为已经有了。
// 如果列表里面元素很多,不堪想象
$('li.trigger').click(handlerFn);
// 这样写好一点,用 $.fn.live 做事件委派
$('li.trigger').live('click', handlerFn);
// 最好的做法,用 $.fn.delegate 做事件委派,还可以指定一个上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);
七、将元素detach出来再操作
DOM 操作是慢的,你应该尽量避免去操作它。jQuery 在 1.4 版引入了 $.fn.detach
来帮助解决这个问题:让你可以先将元素从 DOM 树中剥离出来再进行操作。
var $table = $('#myTable');
var $parent = $table.parent();
$table.detach();
// ... 添加大量的行到表格中去
$parent.append(table);
八、使用样式表给大量元素添加CSS
如果你在用 $.fn.css 给多于 20 个元素修改 CSS,考虑一下添加一个 style 标签, 这样可以速度可以提升 60%。
// 操作大于 20 个元素是不错的,但少于时就不值了
$('a.swedberg').css('color', '#asd123');
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
.appendTo('head');
九、使用$.data而不是$.fn.data
将 $.data 应用于 DOM 元素比直接调用 jQuery 选择结果的 $.fn.data 要快上 10 倍。 虽然,这要先确定你是理解 DOM 元素与 jQuery 选择结果之间的区别的。
// 常规写法
$(elem).data(key,value);
// 快 10 倍
$.data(elem,key,value);
十、变量定义
变量可以定义在一个 statement 内,用不着多个。
// 老套的写法
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);
// 新鲜的写法
var test = 1,
test2 = function() { ... },
test3 = test2(test);
在自执行的函数中,变量定义可以完全省掉。
(function(foo, bar) { ... })(1, 2);