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 相关文章推荐
学习javascript,实现插入排序实现代码
Jul 31 Javascript
jquery子元素过滤选择器使用示例
Jun 24 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
BootStrap中的table实现数据填充与分页应用小结
May 26 Javascript
Javascript点击按钮随机改变数字与其颜色
Sep 01 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 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
《五等分的花嫁》漫画完结!2020年10月第2期TV动画制作组换血!
2020/03/06 日漫
第二节--PHP5 的对象模型
2006/11/16 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
PHP中的str_repeat函数在JavaScript中的实现
2013/09/16 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
js分页工具实例
2015/01/28 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
Javascript的比较汇总
2016/07/25 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
微信小程序自定义toast的实现代码
2018/11/16 Javascript
node基于async/await对mysql进行封装
2019/06/20 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
[01:38]完美世界高校联赛决赛花絮
2018/12/02 DOTA
Python3 操作符重载方法示例
2017/11/23 Python
flask中使用蓝图将路由分开写在不同文件实例解析
2018/01/19 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
django框架model orM使用字典作为参数,保存数据的方法分析
2019/06/24 Python
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
求职自荐信
2013/12/14 职场文书
证券期货行业个人的自我评价
2013/12/26 职场文书
物流专业求职计划书
2014/01/10 职场文书
数学教学随笔感言
2014/02/17 职场文书
干部下基层实施方案
2014/03/14 职场文书
小学校长个人总结
2015/03/03 职场文书
物业公司管理制度
2015/08/05 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
装修安全责任协议书
2016/03/22 职场文书
2019求职信:应届生求职信范文
2019/04/24 职场文书
Spring Cloud 中@FeignClient注解中的contextId属性详解
2021/09/25 Java/Android
2022年四月新番
2022/03/15 日漫
Redis高并发缓存架构性能优化
2022/05/15 Redis