Jquery性能优化

之前，我们减少字节数和请求次数以及加载顺序以使页面加载的更快。如今，我们越来越多的注意到另一个影响网站性能的部分–CPU利用率。使用 jQuery和其他JavaScript框架，使节点选择和DOM操作变得越来越容易，如果使用不当，有可能影响整个网页的响应速度，下面列举11个更有 效的使用jQuery库：

1、总是使用#id去寻找element.

在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法。选择单个元素

1
2
3
4
5
6
7
8
9
10
11
12
1<div id="content">

2    <form method="post" action="/">

3        <h2>Traffic Light</h2>

4        <ul id="traffic_light">

5            <li><input type="radio" class="on" name="light" value="red" /> Red</li>

6            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

7            <li><input type="radio" class="off" name="light" value="green" /> Green</li>

8        </ul>

9        <input class="button" id="traffic_button" type="submit" value="Go" />

10    </form>

11</div>

12

选择button的性能不好的一种方式：

1
2
1var traffic_button = $('#content .button');

2

取而代之的是直接选择button:

1
2
1var traffic_button = $('#traffic_button');

2

选择多个元素
在我们讨论选择多个元素的时候，我们真正需要知道的是DOM的遍历和循环才是性能低下的原因。为了尽量减少性能损失， 总是使用最近的父ID去寻找。

1
2
1var traffic_lights = $('#traffic_light input');

2

**
2、在Classes前面使用Tags**
在jQuery中第二快的选择器就是Tag选择器 ($('head')). 而这是因为它直接映射到JavaScript的getElementsByTagName()方法。

1
2
3
4
5
6
7
8
9
10
11
12
1<div id="content">

2    <form method="post" action="/">

3        <h2>Traffic Light</h2>

4        <ul id="traffic_light">

5            <li><input type="radio" class="on" name="light" value="red" /> Red</li>

6            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

7            <li><input type="radio" class="off" name="light" value="green" /> Green</li>

8        </ul>

9        <input class="button" id="traffic_button" type="submit" value="Go" />

10    </form>

11</div>

12

总是在一个Class前面加上一个tag名字（记得从一个ID传下来）

1
2
1var active_light = $('#traffic_light input.on');

2

注意：在jQuery里Class选择器是最慢的一个选择器;在IE中它循环整个DOM。可能的话尽量避免使用它。不要在ID前面加Tags。例如，它会因为去循环所有的<div>元素去寻找ID为content的<div>，而导致很慢。

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

2

按照同样的思路，从多个ID传下来是冗余的。

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

2

3、缓存jQuery对象
养成保存jQuery对象到一个变量上（就像上面的例子）的习惯。例如，不要这样做：

1
2
3
4
5
1$('#traffic_light input.on).bind('click', function(){...});

2$('#traffic_light input.on).css('border', '3px dashed yellow');

3$('#traffic_light input.on).css('background-color', 'orange');

4$('#traffic_light input.on).fadeIn('slow');

5

取而代之，首现保存jQuery变量到一个本地变量后，再继续你的操作。

1
2
3
4
5
6
1var $active_light = $('#traffic_light input.on');

2$active_light.bind('click', function(){...});

3$active_light.css('border', '3px dashed yellow');

4$active_light.css('background-color', 'orange');

5$active_light.fadeIn('slow');

6

提示：使用$前辍表示我们的本地变量是一个jQuery包集。记住，不要在你的应该程序里出现一次以上的jQuery重复的选择操作。 额外提示：延迟存储jQuery对象结果。
如果你想在你的程序的其它地方使用jQuery结果对象（result object(s)），或者你的函数要执行多次，要把它缓存在一个全局范围的对象里。通过定义一个全局容器保存jQuery结果对象，就可以在其它的函数里引用它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
1// Define an object in the global scope (i.e. the window object)

2window.$my =

3{

4    // Initialize all the queries you want to use more than once

5    head : $('head'),

6    traffic_light : $('#traffic_light'),

7    traffic_button : $('#traffic_button')

8};

9

10function do_something()

11{

12    // Now you can reference the stored results and manipulate them

13    var script = document.createElement('script');

14    $my.head.append(script);

15

16    // When working inside functions, continue to save jQuery results

17    // to your global container.

18    $my.cool_results = $('#some_ul li');

19    $my.other_results = $('#some_table td');

20

21    // Use the global functions as you would a normal jQuery result

22    $my.other_results.css('border-color', 'red');

23    $my.traffic_light.css('border-color', 'green');

24}

25

4、更好的利用链
前面的例子也可以这样写：

1
2
3
4
5
1var $active_light = $('#traffic_light input.on');$active_light.bind('click', function(){...})

2    .css('border', '3px dashed yellow')

3    .css('background-color', 'orange')

4    .fadeIn('slow');

5

这样可以让我们写更少的代码，使JavaScript更轻量。
**
5、使用子查询**
jQuery允许我们在一个包集上附加其它的选择器。因为我们已经在本地变量里保存了父对象这样会减少以后在选择器上的性能开销。

1
2
3
4
5
6
7
8
9
10
11
12
1<div id="content">

2    <form method="post" action="/">

3        <h2>Traffic Light</h2>

4        <ul id="traffic_light">

5            <li><input type="radio" class="on" name="light" value="red" /> Red</li>

6            <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

7            <li><input type="radio" class="off" name="light" value="green" /> Green</li>

8        </ul>

9        <input class="button" id="traffic_button" type="submit" value="Go" />

10    </form>

11</div>

12

例如，我们可以利用子查询缓存active和inactive lights以便后面的操作。

1
2
3
4
1var $traffic_light = $('#traffic_light'),

2    $active_light = $traffic_light.find('input.on'),

3    $inactive_lights = $traffic_light.find('input.off');

4

提示：可以用逗号隔开一次定义多个本地变量，这样可以节省一些字节。

**
6、限制直接对DOM操作**
DOM操作的基本做法是在内存中创建DOM结构，然后再更新DOM结构。这不是jQuery最好的做法，但对JavaScript来讲是高效的。直接操作DOM结构性能是低下的。 例如，如果你需要动态创建一列元素，不要这样做：

1
2
3
4
5
6
7
8
1var top_100_list = [...], // assume this has 100 unique strings

2    $mylist = $('#mylist'); // jQuery selects our <ul> element

3

4for (var i=0, l=top_100_list.length; i<l; i++)

5{

6    $mylist.append('<li>' + top_100_list[i] + '</li>');

7}

8

取而代之，我们希望在插入DOM结构之前先在一个字符串里创建一套元素。
代码

1
2
3
4
5
6
7
8
9
10
1var top_100_list = [...], // assume this has 100 unique strings

2    $mylist = $('#mylist'), // jQuery selects our <ul> element

3    top_100_li = ""; // This will store our list items

4

5for (var i=0, l=top_100_list.length; i<l; i++)

6{

7    top_100_li += '<li>' + top_100_list[i] + '</li>';

8}

9$mylist.html(top_100_li);

10

更快的做法，在插入DOM结构之前我们应该总是在一个父节点里包含许多元素

1
2
3
4
5
6
7
8
9
10
11
12
1var top_100_list = [...], // assume this has 100 unique strings

2    $mylist = $('#mylist'), // jQuery selects our <ul> element

3    top_100_ul = '<ul id="#mylist">'; // This will store our entire unordered list

4

5for (var i=0, l=top_100_list.length; i<l; i++)

6{

7    top_100_ul += '<li>' + top_100_list[i] + '</li>';

8}

9top_100_ul += '</ul>'; // Close our unordered list

10

11$mylist.replaceWith(top_100_ul);

12

如是你照着上面的做了还是对性能有些迷惑的话，可以参考以下内容：
* 试一下jQuery提供的Clone()方法。Clone()方法创建节点数的拷贝，随后你可以在这个副本中进行操作。
* 使用DOM DocumentFragments. As the creator of jQuery points out, 比直接操作DOM性能上更好. 先创建你需要的结构(就像我们上面用一个字符串做的一样), 然后使用jQuery的 insert or replace methods.

7、事件委托（又名：冒泡事件）
除 非特别说明，每一个JavaScript事件（如click, mouseover 等）在DOM结构树上都会冒泡到它的父元素上。如果我们想让很多elements(nodes)调用同一个function这是非常有用的。取而代之的是 你可以只对它们的父级绑定一次，而且可以计算出是哪一个节点触发了事件，而不是绑定一个事件监听器到很多节点上这种效率低下的方式。例如，假如我们要开发 一个包含很多input的大型form，当input被选择的时候我们想绑定一个class name。像这样的帮定是效率低下的：

1
2
3
4
5
1$('#myList li).bind('click', function(){

2    $(this).addClass('clicked');

3    // do stuff

4});

5

反而，我们应该在父级侦听click事件。

1
2
3
4
5
6
7
8
9
1$('#myList).bind('click', function(e){

2    var target = e.target, // e.target grabs the node that triggered the event.

3        $target = $(target);  // wraps the node in a jQuery object

4    if (target.nodeName === 'LI') {

5        $target.addClass('clicked');

6        // do stuff

7    }

8});

9

父节点担当着发报机的工作，可以在触发了事件的目标element上做一些工作。如果你发现自己把一个event listener帮定到很多个element上，那么你这种做法是不正确的。

8、消除查询浪费
虽 然jQuery对没有找到任何匹配的elements处理的很好，但是它还是需要花费时间去查找的。如果你的站点有一个全局的JavaScript，你可 能会把每个jQuery function都放在 $(document).ready(function(){ // all my glorious code })里。 不要这样做。只去放一些页面上适合用到的function。这样做最有效的方式是你的模板可以完全控制任何时候或者地方执行JavaScript以内联脚 本的方式初始化function。例如，在你的“article”页面模板里，你可能在body标签关闭之前包含以下代码

1
2
3
4
5
1<script type="text/javascript>

2mylib.article.init();

3</script>

4</body>

5

如果你的页面模板包含多种有可能在页面或者不在页面上的模块，或者为了可视化效果你需要它们稍后再初如化，你应该在这些模块之后立即放置初如化函数。

1
2
3
4
5
6
7
8
9
1<ul id="traffic_light">

2    <li><input type="radio" class="on" name="light" value="red" /> Red</li>

3    <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>

4    <li><input type="radio" class="off" name="light" value="green" /> Green</li>

5</ul>

6<script type="text/javascript>

7mylib.traffic_light.init();

8</script>

9

你的全局JavaScript库看起来应该是这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1var mylib =

2{

3    article_page :

4    {

5        init : function()

6        {

7            // Article page specific jQuery functions.

8        }

9    },

10    traffic_light :

11    {

12        init : function()

13        {

14            // Traffic light specific jQuery functions.

15        }

16    }

17}

18

9、遵从$(windows).load
有 一种诱惑会使jQuery开发者hook所有事情到 $(document).ready 这个虚伪的事件里。毕竟在大多数例子里都可以看到这样使用。虽然$(document).ready 非常有用，它在页面呈现时发生，虽然其它对象还在下载中。如果你发现你的页面在下载中停顿，就有可能是$(document).ready 引起的。你可以通过把jQuery functions帮定到$(window).load事件来减少下面下载时的CPU使用率，它是在所有HTML（包括iframe内容）都下载完以后才 去调用所有对象的。

1
2
3
4
1$(window).load(function(){

2    // jQuery functions to initialize after the page has loaded.

3});

4

多余的功能，如拖拽、帮定可视化效果和动画、预读取图片等，使用这种方法比较好。

10、压缩JS

虽然和jQuery无关，但在这里也要提一下。使JavaScript函数和变量变得可读是一个趋势，这对开发者来讲是必不可少的，但对普通用户来 讲没有任何关系。不用什么借口，是时候把JS压缩纳入我们的工作流程中来了。注释你的代码，在投放到生产环境之前找一个压缩工具进行压缩。使用 YUICompressor 压缩你代码中多余的浪费的字节。根据我们的经验，它可以安全的把JavaScript压缩的尽可能小，而不会多占用CPU。小提示：为了在 YUICompressor里最大化压缩，应该这样这样定义变量（例如：var my_long_variable_name;）
** **

11、学习jQuery API库文档

学习和最有效的使用jQuery，最好的方法就是去查jQuery的文档了，可以当作手册来用。

网秀推荐文章：http://www.wangshow.com/blog/article_show/38/273736/jQuery-performance-rules