原文地址:http://www.artzstudio.com/2009/04/jquery-performance-rules/
转帖地址:http://www.blueidea.com/tech/web/2009/6737.asp
简单的总结一下:
01. 总是从ID选择器开始继承
02. 在class前使用tag
03. 将jQuery对象缓存起来
04. 掌握强大的链式操作
05. 使用子查询
06. 对直接的DOM操作进行限制
07. 冒泡
08. 消除无效查询
09. 推迟到 $(window).load
10. 压缩 JS
11. 全面掌握jQuery库
01. 总是从ID选择器开始继承
在jQuery中最快的选择器是ID选择器。 因为它直接来自于Javascript的getElementById()方法。提到多元素选择其实是在说DOM遍历和循环, 为了提高性能, 最好从就近的ID开始继承。
02. 在 class 前使用 tag
第二快的选择器是tag选择器($('head'))。 同理,因为它来自原生的getElementsByTagName() 方法。在jQuery中class是最慢的选择器。IE浏览器下它会遍历所有DOM节点不管它用在那里。
03. 将 jQuery 对象缓存起来
要养成将jQuery对象缓存进变量的习惯。为了记住我们本地变量是jQuery的封装, 通常用一个$作为变量前缀。
Never repeat a jQuery selection operation more than once in your application.
04. 掌握强大的链式操作
更少的代码,更轻量。
05. 使用子查询
jQuery 允许我们对一个已包装的对象使用附加的选择器(find)操作。
06. 对直接的DOM操作进行限制
基本思想是在内存中建立确实需要的东西,然后单次操作更新DOM。直接的操作DOM速度很慢。
此外:
试试 jQuery 的 clone 方法, 它会创建一个节点树的副本, 它允许以“离线”的方式进行DOM操作, 当操作全部完成后再将其放回到节点树里.
使用 DOM DocumentFragments。它的性能要明显优于直接的DOM操作.
07. 冒泡
除非在特殊情况下,否则每一个 JS 事件(例如:click,mouseover等)都会冒泡到父级节点。当需要给多个元素调用同个函数时这点会很有用。
代替这种效率很差的多元素事件监听的方法就是:你只需向它们的父节点绑定一次,并且可以计算出哪个节点触发了事件。
像这样绑定事件是低效的:
$('#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 grabs the node that triggered the event.
cell.addClass('selected');
}).bind('blur', function(e){
var cell = $(e.target);
cell.removeClass('selected');
});
父级元素扮演了一个调度员的角色,它可以基于目标元素绑定事件。
08. 消除无效查询
尽管 jQuery 可以优雅的处理没有匹配元素的情况,但它还是需要花费时间去寻找。如果整站只有一个全局 JS , 不能把所有的jQuery函数塞进
$(document)ready(function(){ //所有你引以为傲的代码 })
只运行在页面里用到的函数。最有效的方法就是使用行内初始化函数, 这样HTML页面就能准确的控制何时何处该执行初始化 JS 。
如果为了追求显示的效果将初始化的 JS 代码直接放到 HTML 模块下面也是可行的。
09. 推迟到 $(window).load
jQuery 对于开发者来说有一个很诱人的东西,可以把任何东西挂载到$(document).ready中。
尽管$(document).rady 很有用,可以在页面渲染、其他对象还在下载时执行。但如果你发现页面一直是载入中的状态,则很有可能是由 $(document).ready 中的函数引起的。
可以通过将 jQuery 函数绑定到 $(window).load 事件中来减少页面载入时的 CPU 使用率,这个事件会在所有的 HTML(包括<iframe>)被下载完后执行。
$(window).load(function(){
// 页面完全载入后才初始化的jQuery函数
});
多余的功能例如拖放、视觉特效、动画、预载入隐藏图像等等,都是适合使用这种技术。
10. 压缩 JS
推荐一个 JS 在线压缩地址: http://dean.edwards.name/packer/
11. 全面掌握 jQuery 库