jQuery代码优化 选择符篇


Posted in Javascript onNovember 01, 2011

本文就从选择符的角度简单探讨一下优化jQuery代码的问题。

Sizzle的运行机制

jQuery从1.3开始把根据选择符表达式查找元素的代码独立出来,也就是Sizzle引擎。当我们把一个选择符表达式(比如"#id"、".class"、":nth-child(2)")传递给$()函数时,Sizzle在内部会优先利用浏览器原生支持的DOM方法来查找元素,以求得最大的执行速度。以下就是Sizzle会优先选用的几个标准的原生方法(各个方法的用途不再赘述):

getElementById() 
getElementsByTagName() 
getElementsByClassName() 
querySelectorAll()

如果浏览器不支持某个方法,或者传入的选择符表达式不是标准选择符(如":eq()"、":odd"或其他自定义选择符),Sizzle就会使用document.getElementsByTagName('*')来取得文档中的所有元素,然后再遍历并测试每个元素。显然,这是万不得已才会用的方法;可想而知,这个最笨的方法,效率也是最低的。

优化示例
举个例子,假设我们要取得页面表单中的所有的文本框,即:

<input type="text">
可以使用两个选择符:

$('input[type="text"]') 
$('input:text')

第一个选择符是标准的CSS属性选择符,第二个选择符是自定义选择符。根据前面对Sizzle引擎的分析可知,在大多数现代浏览器(支持原生querySelectorAll()方法的浏览器)中,第一个选择符的速度比第二个要快很多。

再举一个例子。假设有下面两个jQuery查询:

$('input').eq(1) 
$('input:eq(1)')

第一个查询先通过标准的CSS元素选择符查找所有input元素,然后再调用jQuery的eq()方法取得匹配结果中的第二个元素(eq()方法的索引参数是从0开始计算的)。第二个查询则使用了自定义的伪类选择符:eq()。通过测试可以看出,第一种方法的速度比第二种方法快得就更多了。

结论
要尽可能使用CSS规范中规定的选择符,除非没有标准选择符,才考虑使用jQuery的自定义选择符。

(注:本文基于《jQuery基础教程(第3版)》相关章节内容编撰而成。)

Javascript 相关文章推荐
javascript eval函数深入认识
Feb 21 Javascript
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
判断用户是否在线的代码
Mar 05 Javascript
js 页面关闭前的出现提示的实现代码
May 25 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
layDate日期控件使用方法详解
Nov 15 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
jQuery代码优化之基本事件
Nov 01 #Javascript
js下获得客户端操作系统的函数代码(1:vista,2:windows7,3:2000,4:xp,5:2003,6:2008)
Oct 31 #Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
Oct 31 #Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 #Javascript
加载 Javascript 最佳实践
Oct 30 #Javascript
js判断是否为数组的函数: isArray()
Oct 30 #Javascript
JS trim去空格的最佳实践
Oct 30 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Jquery ajaxsubmit上传图片实现代码
2010/11/04 Javascript
extjs之去除s.gif的影响
2010/12/25 Javascript
js获取客户端外网ip的简单实例
2013/11/21 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
2015/08/28 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
JS实现保留n位小数的四舍五入问题示例
2016/08/03 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python使用Flask框架获取当前查询参数的方法
2015/03/21 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
django 通过URL访问上传的文件方法
2019/07/28 Python
简单了解python中的与或非运算
2019/09/18 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python基于httpx模块实现发送请求
2020/07/07 Python
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
比利时的在线灯具店:Lampen24.be
2019/07/01 全球购物
电信专业毕业生推荐信
2013/11/18 职场文书
运动会广播稿200字
2014/01/15 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
教师新年寄语
2014/04/03 职场文书
亲属关系公证书
2014/04/08 职场文书
学校交通安全责任书
2014/08/25 职场文书
县政府办公室领导班子对照检查材料思想汇报
2014/09/28 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android