jQuery性能优化指南

 

原文地址：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 库