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 void(0)的妙用
Oct 21 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
JS取文本框中最小值的简单实例
Nov 29 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
jQuery实现发送验证码并60秒倒计时功能
Nov 25 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
使用puppeteer爬取网站并抓出404无效链接
Dec 20 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
JS实现的tab切换并显示相应内容模块功能示例
Aug 03 Javascript
vue内置组件keep-alive事件动态缓存实例
Oct 30 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使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JavaScript面向对象(极简主义法minimalist approach)
2012/07/17 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
JavaScript Array对象详解
2016/03/01 Javascript
微信小程序(应用号)简单实例应用及实例详解
2016/09/26 Javascript
Vue数据驱动模拟实现3
2017/01/11 Javascript
jquery表单验证插件validation使用方法详解
2017/01/20 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
javascript绘制简单钟表效果
2020/04/07 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
Vue 实现创建全局组件,并且使用Vue.use() 载入方式
2020/08/11 Javascript
Python简单实现enum功能的方法
2016/04/25 Python
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
Python 修改列表中的元素方法
2018/06/26 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
利用python生成照片墙的示例代码
2020/04/09 Python
夏尔巴人登珠峰品牌:Sherpa Adventure Gear
2018/02/08 全球购物
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
公务员考察材料
2014/12/23 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
Python中可变和不可变对象的深入讲解
2021/08/02 Python
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android
教你部署vue项目到docker
2022/04/05 Vue.js
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript