jquery性能优化28条（一）_real小辉侠

个人资料

微博

正文字体大小：大中小

jquery性能优化28条（一）

(2011-12-23 14:05:04)

标签：

分类： jquery那些事

一、选择器性能优化建议

1. 总是从#id选择器来继承

这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。

1

$('#content').hide();

或者从ID选择器继承来选择多个元素:

1

$('#content
p').hide();

2. 在class前面使用tag

jQuery中第二快的选择器就是tag选择器（如$(‘head’)），因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)

1

var 
receiveNewsletter = $('#nslForm
input.on');

jQuery中class选择器是最慢的，因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。也不要用tag来修饰ID。下面的例子会遍历所有的div元素来查找id为’content’的那个节点：

1

var 
content = $('div#content');

// 非常慢，不要使用

用ID来修饰ID也是画蛇添足：

1

var 
traffic_light = $('#content
#traffic_light');

// 非常慢，不要使用

3. 使用子查询

将父对象缓存起来以备将来的使用

1

2

3

4

var 
header = $('#header');

var 
menu = header.find('.menu');

// 或者

var 
menu = $('.menu',
header);

4. 优化选择器以适用Sizzle的“从左至右”模型

自版本1.3之后，jQuery采用了Sizzle库，与之前的版本在选择器引擎上的表现形式有很大的不同。它用“从左至右”的模型代替了“从右至左”的模型。确保最右的选择器具体些，而左边的选择器选择范围较宽泛些：

1

var 
linkContacts = $('.contact-links
div.side-wrapper');

而不要使用

1

var 
linkContacts = $('a.contact-links
.side-wrapper');

阅读┊ 收藏 ┊ 喜欢 ▼ ┊打印┊举报/Report