jQuery代码优化 选择符篇

所属分类: 网络编程 / JavaScript 阅读数: 1712
收藏 0 赞 0 分享
本文就从选择符的角度简单探讨一下优化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版)》相关章节内容编撰而成。)
更多精彩内容其他人还在看

Vue组件选项props实例详解

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript将url解析为json格式的两种方法

本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解JS数组Reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
收藏 0 赞 0 分享

JS模拟超市简易收银台小程序代码解析

本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
收藏 0 赞 0 分享

JavaScript 完成注册页面表单校验的实例

下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

简单的网页广告特效实例

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue内容分发slot(全面解析)

下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue自定义事件(详解)

下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Mui使用jquery并且使用点击跳转新窗口的实例

下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

深入理解ES6的迭代器与生成器

本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多