你好,游客 登录 注册 搜索
背景:
阅读新闻

jQuery性能优化指南

[日期:2009-12-07] 来源:cssrain  作者: [字体: ]

  现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了,  比如我.jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, 性能问题还是需要引起重视的. 在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下:

  1. 总是从ID选择器开始继承
  2. 在class前使用tag
  3. 将jquery对象缓存起来
  4. 掌握强大的链式操作
  5. 使用子查询
  6. 对直接的DOM操作进行限制
  7. 冒泡
  8. 消除无效查询
  9. 推迟到 $(window).load
  10. 压缩js
  11. 全面掌握jquery库

1,总是从ID选择器开始继承
  在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法。
  例如有一段HTML代码:

<div id=”content”>
<form method=”post” action=”#”>
<h2>交通信号灯</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red” /> 红色</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow” /> 黄色</li>
<li><input type=”radio” class=”off” name=”light” value=”green” /> 绿色</li>
</ul>
<input class=”button” id=”traffic_button” type=”submit” value=”Go” />
</form>
</div>

  如果采用下面的选择器,那么效率是低效的。

var traffic_button = $(”#content .button”);

因为button已经有ID了,我们可以直接使用ID选择器。如下所示:

var traffic_button = $(”#traffic_button”);


  当然 这只是对于单一的元素来讲。如果你需要选择多个元素,这必然会涉及到 DOM遍历和循环,
为了提高性能,建议从最近的ID开始继承。
如下所示:

var traffic_lights = $(”#traffic_light input”);


2,在class前使用tag(标签名)
  在jQuery中第二快的选择器是tag(标签)选择器( 比如:$(”head”) )。
跟ID选择器累时,因为它来自原生的getElementsByTagName() 方法。
继续看刚才那段HTML代码:

<div id=”content”>
<form method=”post” action=”#”>
<h2>交通信号灯</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red” /> 红色</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow” /> 黄色</li>
<li><input type=”radio” class=”off” name=”light” value=”green” /> 绿色</li>
</ul>
<input class=”button” id=”traffic_button” type=”submit” value=”Go” />
</form>
</div>

  比如需要选择 红绿 单选框,
  那么可以使用一个tag name来限制(修饰)class ,如下所示:

var active_light = $(”input.on”);


  当然也可以结合 就近的ID,如下所示:

var active_light = $(”#traffic_light input.on”);


在使用tag来修饰class的时候,我们需要注意以下几点:
 (1) 不要使用tag来修饰ID,如下所示:
 

var content = $(”div#content”);

  这样一来,选择器会先遍历所有的div元素,然后匹配#content。
 (好像jQuery从1.3.1开始改变了选择器核心后,不存在这个问题了。暂时无法考证。)
 (2)不要画蛇添足的使用ID来修饰ID,如下所示:
 

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


注:如果使用属性选择器,也请尽量使用tag来修饰,如下所示:

$('p[row="c3221"]').html();而不是这样:$('[row="c3221"]').html();

3,将jQuery对象缓存起来
  把jQuery对象缓存起来 就是要告诉我们 要养成将jQuery对象缓存进变量的习惯。
  下面是一个jQuery新手写的一段代码:

$(”#traffic_light input.on”).bind(”click”, function(){ … });
$(”#traffic_light input.on”).css(”border”, “1px dashed yellow”);
$(”#traffic_light input.on”).css(”background-color”, “orange”);
$(”#traffic_light input.on”).fadeIn(”slow”);


  但切记不要这么做。
  我们应该先将对象缓存进一个变量然后再操作,如下所示:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){ … });
$active_light.css('border', '1px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');


记住,永远不要让相同的选择器在你的代码里出现多次.
注:(1)为了区分普通的JavaScript对象和jQuery对象,可以在变量首字母前加上 $ 符号。
 (2)上面代码可以使用jQuery的链式操作加以改善。如下所示:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){ … })
             .css('border', '1px dashed yellow')
             .css('background-color', 'orange')
             .fadeIn('slow');


如果你打算在其他函数中使用jQuery对象,那么你必须把它们缓存到全局环境中。
如下代码所示:

// 在全局范围定义一个对象 (例如: window对象)
window.$my = {
head : $(”head”),
traffic_light : $(”#traffic_light”),
traffic_button : $(”#traffic_button”)
};
function do_something(){
// 现在你可以引用存储的结果并操作它们
var script = document.createElement(”script”);
 $my.head.append(script);
// 当你在函数内部操作是, 可以继续将查询存入全局对象中去.
$my.cool_results = $(”#some_ul li”);
$my.other_results = $(”#some_table td”);
 // 将全局函数作为一个普通的jquery对象去使用.
$my.other_results.css(”border-color”, “red”);
 $my.traffic_light.css(”border-color”, “green”);
}
//你也可以在其他函数中 使用它

 

收藏 推荐 打印 | 录入:木鸟 | 阅读:
相关新闻       优化  jQuery 
本文评论   查看全部评论 (2)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款
热门评论