jQuery 性能优化手册 推荐
2024-05-06 14:11:20
供稿：网友
在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:
总是从ID选择器开始继承
在class前使用tag
将jquery对象缓存起来
掌握强大的链式操作
使用子查询
对直接的DOM操作进行限制
冒泡
消除无效查询
推迟到 $(window).load
压缩js
全面掌握jquery库
1. 总是从ID选择器开始继承
在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法.
代码如下:
<div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>
像这样选择按钮是低效的:
代码如下:
var traffic_button = $(‘#content .button');
用ID直接选择按钮效率更高:
代码如下:
var traffic_button = $(‘#traffic_button');
选择多个元素
提到多元素选择其实是在说DOM遍历和循环, 这些都是比较慢的东西.为了提高性能, 最好从就近的ID开始继承.
代码如下:
var traffic_lights = $(‘#traffic_light input');
2. 在class前使用tag
第二快的选择器是tag选择器($('head')). 同理,因为它来自原生的getElementsByTagName() 方法.
代码如下:
<div id=“content”>
<form method=“post” action=“/”>
<h2>Traffic Light</h2>
<ul id=“traffic_light”>
<li><input type=“radio” class=“on” name=“light” value=“red” /> Red</li>
<li><input type=“radio” class=“off” name=“light” value=“yellow” /> Yellow</li>
<li><input type=“radio” class=“off” name=“light” value=“green” /> Green</li>
</ul>
<input class=“button” id=“traffic_button” type=“submit” value=“Go” />
</form>
</div>
总是用一个tag name来限制(修饰)class (并且不要忘记就近的ID):
代码如下:
var active_light = $(‘#traffic_light input.on');
注意: 在jquery中Class是最慢的选择器. IE浏览器下它会遍历所有DOM节点不管它用在那里.
不要用用tag name来修饰ID. 下面的例子将会遍历所有的div元素来查找id为'content'的哪一个节点:
代码如下:
var content = $(‘div#content');
用ID修饰ID也是画蛇添足:
代码如下:
var traffic_light = $(‘#content #traffic_light');
