JS优化

1、总是使用#id去寻找element.
在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。
选择单个元素

2、在Classes前面使用Tags
在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。
总是在一个Class前面加上一个tag名字（记得从一个ID传下来）

注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。

3、缓存jQuery对象
养成保存jQuery对象到一个变量上（就像上面的例子）的习惯。例如，不要这样做：

$('#traffic_light input.on).bind('click', function(){...});

取而代之，首现保存jQuery变量到一个本地变量后，再继续你的操作。

var $active_light = $('#traffic_light input.on');

4、更好的利用链
var $active_light = $('#traffic_light input.on');

$active_light.bind('click', function(){...})

.css('border', '3px dashed yellow')
.css('background-color', 'orange')
        .fadeIn('slow');
这样可以让我们写更少的代码，使JavaScript更轻量。

5、使用子查询

6、限制直接对DOM操作

DOM操作的基本做法是在内存中创建DOM结构，然后再更新DOM结构。这不是jQuery最好的做法，但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。 例如，如果你需要动态创建一列元素，不要这样做：

var top_100_list = [...], // assume this has 100 unique strings   

$mylist = $('#mylist'); // jQuery selects our <ul> element

for (var i=0, l=top_100_list.length; i<l; i++){   

$mylist.append('<li>' + top_100_list[i] + '</li>');

}

取而代之，我们希望在插入DOM结构之前先在一个字符串里创建一套元素。

代码

var top_100_list = [...], // assume this has 100 unique strings   

$mylist = $('#mylist'), // jQuery selects our <ul> element   

top_100_li = ""; // This will store our list items

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);

7、事件委托（又名：冒泡事件）

除非特别说明，每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发 一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的：

$('#myList li).bind('click', function(){

$(this).addClass('clicked');// do stuff

});

反而，我们应该在父级侦听click事件。

$('#myList).bind('click', function(e){

var target = e.target, // e.target grabs the node that triggered the event.

   $target = $(target);  // wraps the node in a jQuery object

if (target.nodeName === 'LI') {

   $target.addClass('clicked');     // do stuff

}

});

父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上，那么你这种做法是不正确的。