今天面试被问到jQuery优化特地总结一下

jQuery优化
1.总是从ID选择器开始继承
2.在class前使用targename(标签名)
3.将jQuery对象缓存起来
记住，永远不要让相同的选择器在你的代码里出现多次： （1）为了区分普通的JavaScript对象和jQuery对象，可以在变量首字母前加上$符号。 （2）上面代码可以使用jQuery的链式操作加以改善。
var $active_light = $("#traffic_light input.on"); $active_light.bind("click", function(){ ... }) .css("border", "1px dashed yellow") .css("background-color", "orange") .fadeIn("slow");
4.对直接的DOM操作进行限制
我们应该将整套元素字符串在插入进dom中之前先全部创建好，如下所示： var top_100_list = [...], $mylist = $("#mylist"), top_100_li = ""; // 这个变量将用来存储我们的列表元素 for (var i=0, l=top_100_list.length; i<l; i++){ top_100_li += "<li>" + top_100_list[i] + "</li>"; } $mylist.html(top_100_li);
5.冒泡
比如,我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class传统的做法是，直接选中input，然后绑定focus等，如下所示： $("#entryform input").bind("focus", function(){ $(this).addClass("selected"); }).bind("blur", function(){ $(this).removeClass("selected"); }); 当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码： $("#entryform").bind("focus", function(e){ var $cell = $(e.target); // e.target 捕捉到触发的目标元素 $cell.addClass("selected"); }).bind("blur", function(e){ var $cell = $(e.target); $cell.removeClass("selected"); });
6.推迟到 $(window).load
如果你发现你的页面一直是载入中的状态，很有可能就是$(document).ready函数引起的。 你可以通过将jQuery函数绑定到$(window).load事件的方法来减少页面载入时的cpu使用率。 它会在所有的html(包括<iframe>)被下载完成后执行。 $(window).load(function(){ // 页面完全载入后才初始化的jQuery函数. }); 一些特效的功能，例如拖放, 视觉特效和动画,预载入隐藏图像等等，都是适合这种技术的场合。
7.压缩JavaScript
8 尽量使用ID选择器
id选择器是class选择器的100倍 61ms 5600ms 操作1000次li