jQuery性能优化（ie6）

ie6浏览器，js引擎解析速度很慢，所以只能选择优化js代码

1.尽量使用#id去寻找元素（id是唯一的，无需遍历和循环DOM）

2.jQuery中第二快的选择器就是Tag选择器，尽量在Classes前面使用Tags
eg：var active_light = $(‘#traffic_light input.css’); 比$(‘.css’)快许多

3.养成保存jQuery对象到一个变量上的习惯
记住,永远不要让相同的选择器在你的代码里出现多次.

eg：
$(‘#traffic_light input.on).bind(‘click’, function(){…});
$(‘#traffic_light input.on).css(‘border’, ‘3px dashed yellow’);
$(‘#traffic_light input.on).css(‘background-color’, ‘orange’);
$(‘#traffic_light input.on).fadeIn(‘slow’);
取而代之，首现保存jQuery变量到一个本地变量后，再继续你的操作。

var $active_light = $(‘#traffic_light input.on’);
$active_light.bind(‘click’, function(){…});
$active_light.css(‘border’, ‘3px dashed yellow’);
$active_light.css(‘background-color’, ‘orange’);
$active_light.fadeIn(‘slow’);

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.使用子查询
jQuery 允许我们对一个已包装的对象使用附加的选择器操作. 因为我们已经在保存了一个父级对象在变量

里, 这样大大提高对其子元素的操作:
var $traffic_light = $(‘#traffic_light’),
$active_light = $traffic_light.find(‘input.on’),
$inactive_lights = $traffic_light.find(‘input.off’);
提示: 你可以用逗号分隔的方法一次声明多个局部变量 节省字节数

6.将 jquery结果缓存到一个全局变量中
// 在全局范围定义一个对象 (例如: window对象)
window.$my =
{
// 初始化所有可能会不止一次要使用的查询
head : $(‘head‘),
traffic_light : $(‘#traffic_light‘),
traffic_button : $(‘#traffic_button‘)
};
function do_something()
{
//现在你可以引用存储的结果并操作它们
var script = document.createElement(‘script‘);
$my.head.append(script);
$my.cool_results = $(‘#some_ul li‘);
$my.other_results = $(‘#some_table td‘);// 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css(‘border-color‘, ‘red‘);
$my.traffic_light.css(‘border-color‘, ‘green‘);
}

7.第三，多用父子关系，少用嵌套关系。

例如，使用parent>child代替parent child。因为”>”是child选择器，只从子节点里匹配，不递归。而” “是后

代选择器，递归匹配所有子节点及子节点的子节点，即后代节点。

jQuery选择器使用频率列表

续表