加载中…
个人资料
微博
  • 博客等级：
  • 博客积分：
  • 博客访问：
  • 关注人气：
  • 获赠金笔：0支
  • 赠出金笔：0支
  • 荣誉徽章：
正文 字体大小：大 中 小

jQuery性能优化11条（三）

(2011-12-23 14:38:17)
标签：

jquery

性能优化

it

 分类： jquery那些事

6、限制直接对DOM操作

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

  1. var top_100_list = [...], // assume this has 100 unique strings     
  2. $mylist = $('#mylist'); // jQuery selects our <ul> element  
  3. for (var i=0, l=top_100_list.length; i<l; i++){     
  4.     $mylist.append('<li>' + top_100_list[i] + '</li>');  
  5. }  
 

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

  1. var 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. for (var i=0, l=top_100_list.length; i<l; i++){  
  5.     top_100_li += '<li>' + top_100_list[i] + '</li>';  
  6. }  
  7. $mylist.html(top_100_li);  
 

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

  1. var 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. for (var i=0, l=top_100_list.length; i<l; i++){  
  5.     top_100_ul += '<li>' + top_100_list[i] + '</li>';  
  6. }  
  7. top_100_ul += '</ul>'; // Close our unordered list  
  8. $mylist.replaceWith(top_100_ul);  
 

如是你照着上面的做了还是对性能有些迷惑的话，可以参考以下内容：

* 试一下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. $('#myList li).bind('click', function(){  
  2.     $(this).addClass('clicked');    // do stuff  
  3. });  
 

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

  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');        // do stuff  
  6.     }  
  7. });  
 

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

8、消除查询浪费

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

<script type="text/javascript>mylib.article.init();</script></body>如果你的页面模板包含多种有可能在页面或者不在页面上的模块，或者为了可视化效果你需要它们稍后再初始化，你应该在这些模块之后立即放置初始化函数。

  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. <mce:script type="text/javascript><!--  
  7. mylib.traffic_light.init();  
  8. // --></mce:script>  
 

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

  1. var mylib ={  
  2.     article_page :    {  
  3.         init : function()        {  
  4.             // Article page specific jQuery functions.   
  5.        }  
  6.     },   
  7.    traffic_light :    {  
  8.         init : function()        {  
  9.             // Traffic light specific jQuery functions.   
  10.        }  
  11.     }  
  12. }   
 

9、遵从$(windows).load

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

  1. $(window).load(function(){  
  2.     // jQuery functions to initialize after the page has loaded.  
  3. });  
 

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

 

10、压缩JS

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

 

11、学习jQuery API库文档

学习和最有效的使用jQuery，最好的方法就是去查jQuery的文档(http://api.jquery.com/)了，可以当作手册来用。

 

[原文出处：http://blog.csdn.net/alex197963/archive/2010/09/09/5873066.aspx]

喜欢

0

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

新浪BLOG意见反馈留言板　欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

Copyright © 1996 - 2022 SINA Corporation, All Rights Reserved

新浪公司 版权所有