jQuery 性能优化指南 (1)


Posted in Javascript onMay 21, 2009
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性能优化指南(1)到此结束,请查看指南(2)。
 
 
英文原文:http://www.artzstudio.com/2009/04/jquery-performance-rules/
中文翻译:http://rlog.cn/350 & http://cssrain.cn
 
Javascript 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
Javascript操纵Cookie实现购物车程序
Feb 15 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
Jun 12 Javascript
extjs之去除s.gif的影响
Dec 25 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
Apr 12 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
原生js实现自定义消息提示框
Nov 19 Javascript
javascript操作cookie_获取与修改代码
May 21 #Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 #Javascript
Javascript 的addEventListener()及attachEvent()区别分析
May 21 #Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
JS backgroundImage控制
May 19 #Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 #Javascript
编写兼容IE和FireFox的脚本
May 18 #Javascript
You might like
重料打造自己的“宝马”---第三代
2021/03/02 无线电
咖啡知识 除了喝咖啡还有那些知识点
2021/03/06 新手入门
用PHP生成html分页列表的代码
2007/03/18 PHP
简单的php 验证图片生成函数
2009/05/21 PHP
php curl优化下载微信头像的方法总结
2018/09/07 PHP
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
AngularJS中的Promise详细介绍及实例代码
2016/12/13 Javascript
javascript常用的设计模式
2017/02/09 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
解决VUE中document.body.scrollTop为0的问题
2018/09/15 Javascript
微信小程序 轮播图实现原理及优化详解
2019/09/29 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
js对象简介与基本用法示例
2020/03/13 Javascript
Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
2014/06/04 Python
跟老齐学Python之总结参数的传递
2014/10/10 Python
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
python爬虫使用cookie登录详解
2017/12/27 Python
Python爬豆瓣电影实例
2018/02/23 Python
python mysql断开重连的实现方法
2019/07/26 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
工商管理本科毕业生求职信范文
2013/10/05 职场文书
大专应届生个人简历的自我评价
2013/10/15 职场文书
上班看电影检讨书
2014/02/12 职场文书
校园环保标语
2014/06/13 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
初中数学课堂教学反思
2016/02/17 职场文书