按代码行数来评估软件开发的进度，就如同按重量来评估飞机建造的进度。
链式调用
$(document.body).append("<div class='baaron' />");
$("div.baaron").click(function () {
});
用链式调用能避免再查询。推荐写法：
$("<div class='baaron' />")
.appendTo(document.body)
.click(function () {
});
一次性设置元素的内容
$.each(reallyLongArray, function (count, item) {
var newLI = '<li>' + item + '</li>';
$('#ballers').append(newLI);
});
DOM 操作是比较耗性能的。上面的代码，每次循环，都会做一次 DOM 操作。用拼接字符串的方式一次性设置元素的内容来减少 DOM 操作。写法如下
var myhtml = '';
$.each(reallyLongArray, function (count, item) {
myhtml += '<li>' + item + '</li>';
});
$('#ballers').html(myhtml)
也可以用 createDocumentFragment，这里就不介绍了。
使用 data
$(elem).data(key, value)
推荐写法
$.data(elem, key, value)
推荐写法的效率比反模式高。
查找子元素
查找子元素用 find 比用上下文的代码可读性好。性能方面差不多。
用上下文这么写：
var arms = $('div.robotarm', '#container');
$('.reply_form', $(this).closest('.comment')).hide();
用 find 这么写
var arms = $('#container').find('div.robotarm');
$(this).closest('.comment').find('.reply_form').hide();
分离元素
如要要对元素做大量操作，将元素从 DOM 树中分离出来，操作完后再放回去。很多 DOM 操作会导致页面的重绘，将元素分离出去可以减少重绘，从而提升性能。如
var table = $('#some-table');
var parent = table.parent();
table.detach();
table.addLotsAndLotsOfRows();
parent.append(table);
事件委托
$('a.trigger', $('#container')[0]).live('click', handlerFn)
如上写法不支持链式调用。推荐写法
$('#container').on('click', 'a.trigger', handlerFn);
缓存查询结果
$('.list-item').click(function () {
$('.photo').hide();
});
如上写法在每次点击时都会查询 '.photo'。推荐写法
var $photo;
$('.list-item').click(function () {
$photo = $photo || $('.photo');
$photo.hide();
});
给窗口绑定滚动事件
滚动事件会在滚动时被很频繁的触发，基于性能考虑，要做下节流操作。写法：
var scrollTimeout; // global for any pending scrollTimeout
$(window).scroll(function () {
if (scrollTimeout) {
// clear the timeout, if one is pending
clearTimeout(scrollTimeout);
scrollTimeout = null;
}
scrollTimeout = setTimeout(scrollHandler, 250);
});
scrollHandler = function () {
// Check your page position and then
// Load in more results
// outerPane.html();
};
对于 keyup 事件，也可以做如上的处理。
所有 JavaScript 模式：http://shichuan.github.io/javascript-patterns/
推荐阅读： jQuery Anti-Patterns for Performance
往期前端早读课地址：http://www.jianshu.com/c/0fda3d387a6d
