jquery提升性能最佳实践小结

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

// 别这样
$.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);

// 不理想
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();
}
})

// 不要这样
$(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(url + #unicorns, PI.unicornCb);
},
candyMtn: function(e) {
$(#yayeffects).slideUp(PI.slideCb);
},
slideCb: function() {...
},
unicornCb: function() {...
}
}
$(document).ready(PI.onReady);

// 非常快
$(#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结构也有助于改善选择器的性能，选择器引擎可以少跑几层去寻觅那个元素了 。

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

// 不好的 (如果列表里面元素很多)
$(li.trigger).click(handlerFn);

// 较好的: event delegation with $.fn.live
$(li.trigger).live(click, handlerFn);

// 最优的: $.fn.delegate
$(#myList).delegate(li.trigger, click, handlerFn);

var $table = $(#myTable);
var $parent = table.parent();
$table.detach();
// ... 添加大量的行到表格中
$parent.append(table);

// 多于20个 明显慢
$(a.swedberg).css(color, #asd123);
$(<style type="text/css">a.swedberg { color : #asd123 }</style>).appendTo(head);

// 常用
$(elem).data(key, value);
// 快十倍
$.data(elem, key, value);

//太遭了，执行了三个方法后才意识到里面是空的
$(#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，因为即使操作的元素为空其开销也不少 。

// 老套写法
var test = 1;
var test2 = function() {...
};
var test3 = test2(test);

// 新
var test = 1,
test2 = function() {...
},
test3 = test2(test);在自动执行的函数，变量的定义可以完全省掉 。 (function(foo, bar) {...
})(1, 2);

// 旧方法
if (type == foo || type == bar) {...
}

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

// 查找对象
if (({
foo: 1,
bar: 1
})[type]) {...
}