`
phpxiaoxin
  • 浏览: 252213 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

养成使用jQuery Sizzle选择器的良好习惯

    博客分类:
  • js
阅读更多
jquery 1.3将选择器引擎独立,定名为Sizzle,这也是jQuery第一个独立的模块。在Sizzle的介绍里,关于它的首要目的就是
在"最常用的选择器使用"比之前版本的引擎更快。(什么是"最常用的选择器使用",请参见 http://ejohn.org/blog/selectors-that-people-actually-use )
实际上,选择器引擎的运用对于页面性能起了至关重要的作用。使用合适的选择器表达式可以轻易的提高性能、增强语义并简化逻辑,而你所需要做的,不过是培养几个习惯而已。

旧习惯
我 们最常用的简单选择器包括"id选择器"、"类选择器"、"标签选择器",毫无疑问的是id选择器有着最好的速度。这取决于dom内置的函数 getElementById,其次是标签选择器,使用的是dom内置的函数getElementsByTag,最差的是类选择器,其需要通过正则解析 html,并且需要在浏览器内核外递归,这种递归遍历是无法被优化的。
就需求来说,css中选择器是为了通过语义来渲染样式,而jQuery中大 部分情况只是为了选出一类DOMElement,加以同一逻辑的操作。而在"最常用的选择器使用"中,类选择器以13.082%的使用率排在第二位。也就 是说在13.082%的情况下,整个document的html被解析了一遍,并递归到DOM树的叶子节点。这部分无意义的性能损耗令人发指。

最常用的选择器使用


使用率 统计数
#id 51.290% 1431
.class 13.082% 365
tag 6.416% 179
tag.class 3.978% 111
#id tag 2.151% 60
tag#id 1.935% 54
#id:visible 1.577% 44
#id .class 1.434% 40
.class .class 1.183% 33
* 0.968% 27
#id tag.class 0.932% 26
#id:hidden 0.789% 22
tag[name=value] 0.645% 18
.class tag 0.573% 16
[name=value] 0.538% 15
tag tag 0.502% 14
#id #id 0.430% 12
#id tag tag 0.358% 10

最重要的四个建议习惯

1.以#id开始
任何情况下,请从id选择器开始,哪怕不存在这个id,也请为选择器操作添加一个id。因为这样选择器会从一个相对末端的DOMNode开始。

2.使用tag.class代替.class
关于选择器性能,jQuery官方文档有这么一段描述:
For example, ".class" is far more popular than "tag.class" even though the second one is much more performant. What's especially important about this is that the degree of performance hit isn't that much of an issue. For example, the difference between 4ms and 30ms is virtually imperceptible.
标签是有限的,而类则可以看作是拓展标签的语义的一种方法,那么大部分情况下,使用同一个类的标签也是相同的。

3.尽可能使用parent>child而非parent child
">"是child选择器,只从子节点里匹配,不递归。而" "是后代选择器,递归匹配所有子节点及子节点的子节点(后代节点)。

4.缓存选出的jQuery对象
如果选出结果不发生变化的话,不妨缓存选出的jQuery对象,哪怕只有一会儿。比如下面的代码里,这种性能差异就被循环放大了,养成缓存jQuery对象的习惯可以让你在不经意间就完成主要的性能优化。

// case 1
for (i = 0 ; i < 1000 ; i ++ ) ... {
    
var myList = $( ' .myList ' );
    myList.append(
' This is list item ' + i);
}

// case 2
var myList = $( ' .myList ' );

for (i = 0 ; i < 1000 ; i ++ ) ... {
    myList.append(
' This is list item ' + i);
}

如果养成以上四个习惯,我想我们的选择器性能已经优化了七成了。
下面介绍一些其他的选择器表达式建议。

其他建议习惯
1.摒除表达式中的冗余部分,类似于#id2 #id1 或者 tag#id1 的表达式中,都存在冗余部分,实际上只要#id1即可。

2.选择特定的表单元素使用[name=x
虽然name选择器写法上属于属性选择器,但是实际上普通的属性选择器使用的是递归遍历子节点来匹配,而name选择器解析优先级更高,并调用DOM内置 函 数getElementsByName。虽然在IE和Opera里,指定了name但未指定id的DOMElement也会可以使用 getElementById得到,但是在jQuery里,为了保证跨浏览器,$("#id")会多做一次判断,把这些不一致的结果给过滤掉。所以 name选择器成了jQuery下的唯一选择。

3.选择同一type的input元素使用[:type]
这是唯一符合需要的简单写法。

4.有条件的使用反向选择器,反向选择器是指类似于":not(exp)"的表达式。反向选择器实际上性能并不比同逻辑的正向选择器差很多。而在一些情况 下,为了达到反向选择器的效果, 我们或许要写出很复杂的表达式,或需要添加额外的类,或需要选出结果后再筛选一遍。这都不如使用反响选择器,无论是在性能上还是在保持逻辑的简单上。而 jQuery 1.3里,反向选择器得到了增强,之前只可以接受简单的反向表达式。关于jQuery 1.3的变化,大家也可以参考( jQuery 1.3 发布 )

5.有条件的使用prev + next,在语义化的DOM里,我们常常使用结构来为两个DOMElement建立关系,以表达它们对应的实体的意义。
请参考下面的html片段
< div id ="entities" >
< div id ="entityid" class ="entity" >
< div class ="namelabel" > name </ div >
< div class ="name" > entityname </ div >
</ div >
</ div >

当我们需要对所有.entity的.namelabel进行操作的的时候,我们可以用$("#entities>div.entity>div.namelabel")来选择。这里的关系就是通过.entity和.namelabel父子节点的结构来建立的。
不过有的时候我们无法选出一个合适的父节点来,例如<dt></dt><dd></dd>,或是<label></label><input/>。
其实相邻节点也是我们惯用的表达关系的结构,而且这种关系用jQuery选择器效率比父子选择器更好。
prev + next用来表示1对1的关系,在1对多的情况下,可以考虑使用prev ~ siblings

结论:jQuery的选择器引擎非常强大,正因为如此,我们才更应该谨慎的并充分的使用它。
来源:http://space.cnblogs.com/group/topic/9737/
分享到:
评论

相关推荐

    jQuery中的Sizzle引擎分析

    Sizzle是jQuery中的核心选择器引擎,专门负责解析和执行CSS选择器。Sizzle的设计目标是独立于DOM API,使其能够在各种浏览器环境下工作,即使这些浏览器对CSS选择器的支持不完全。 在jQuery中,Sizzle引擎主要实现...

    jQuery表单选择器源码

    jQuery使用了名为`Sizzle`的独立选择器引擎来处理CSS选择器。`Sizzle`能够高效地解析和执行CSS选择器,包括处理复杂的组合选择器和属性选择器。在jQuery的源码中,`Sizzle`被引入并集成,使得开发者可以利用其强大的...

    jquery 属性选择器的使用

    此外,jQuery 的选择器引擎 Sizzle 更加强大,能处理更复杂的选择器表达式,并且在兼容性方面优于原生 CSS。 ### 四、性能优化 虽然属性选择器非常方便,但在大型项目中,过度使用可能会影响页面加载和渲染速度。...

    jquery 选择器引擎sizzle浅析

    于是看了jquery的源码,jquery用的选择器的引擎是sizzle,是jquery的作者另一开源项目,在github上面有,号称最快的dom选择器!不到2000行代码。上面说了不是很精彩的开场白,我么来个 for example: $(‘.test’) 在...

    jQuery常规选择器源码

    "code2"、"code3"、"code1"、"code4"这些文件名可能是包含示例代码的文件,它们可能展示了jQuery选择器的实际使用。通过查看和分析这些代码,学习者可以更直观地理解选择器的功能,并学习如何将它们集成到自己的...

    jQuery中的Sizzle引擎分析demo

    jQuery是一个广泛使用的JavaScript库,它的核心特性之一是其强大的选择器引擎——Sizzle。Sizzle引擎使得开发者能够使用类似于CSS的语法来选取DOM元素,极大地提高了网页开发的效率。在这个"jQuery中的Sizzle引擎...

    jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析

    ### jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析 Sizzle选择器是jQuery库中用于解析和匹配DOM元素的一个核心组件。选择器的匹配逻辑在性能优化中起着至关重要的作用,尤其是在处理复杂的CSS选择器时。...

    jQuery选择器源码解读(八):addCombinator函数

    Sizzle是jQuery所使用的底层选择器引擎,它是用来解析和执行这些选择器的核心库。 addCombinator函数是Sizzle选择器引擎中一个关键的组件,它的作用是根据提供的选择器和关系来创建一个新的函数,这个函数能够...

    Selenium.WebDriver.Extensions:Selenium WebDriver的扩展,包括jQuerySizzle选择器支持

    Selenium WebDriver的扩展包括jQuery / Sizzle选择器支持。 产品特点 主要 支持嵌套选择器 易于设置:安装NuGet软件包并开始与您现有的Selenium解决方案一起使用 通过与Appveyor的持续集成设置,单元和集成测试以及...

    jQuery选择器源码解读(一):Sizzle方法

    Sizzle选择器是jQuery库中的一个核心功能,它允许开发者通过简单的字符串选择器来找到DOM元素。在Sizzle方法中,它执行了多项任务,包括对不同类型的单一选择器的快速解析、利用浏览器原生方法querySelectorAll获取...

    Sizzle的

    Sizzle是一个独立的、开源的JavaScript选择器引擎,主要用于处理CSS选择器,是jQuery早期版本的核心部分。它为JavaScript开发者提供了一种高效的方式来查找和操作DOM(文档对象模型)中的元素,极大地简化了网页脚本...

    最全前端面试题-5(jquery篇-上百篇题集整理1个月)

    4. **选择器支持**:Zepto使用Sizzle选择器引擎,与jQuery相同,但某些高级CSS选择器在Zepto中可能不被支持。 5. **浏览器兼容性**:jQuery致力于广泛的浏览器兼容性,包括较老版本的IE,而Zepto主要面向现代浏览器...

    SizzleStats:用于收集 Sizzle 选择器性能统计信息的 jQuery 插件

    用于收集和显示 Sizzle 选择器的控制台性能统计信息的 jQuery 插件。 Sizzle 通过$.find()集成到 jQuery 中,并用于所有接受选择器字符串的方法中,例如.filter(selector) 、 .closest(selector)等。 SizzleStats ...

    前端项目-sizzle.zip

    3. **独立于库**:与其他前端库如jQuery不同,Sizzle是一个独立的选择器引擎,可以被任何JavaScript项目集成,不需要依赖其他大型框架。 4. **API设计**:Sizzle提供了一套简洁的API,使得开发者可以方便地使用CSS...

    jquery全面提速

    2. **jQuery选择器优化**:jQuery的选择器引擎Sizzle在处理复杂选择器时可能效率较低。优化选择器可以显著提升性能,例如尽量使用ID选择器而非类选择器,避免使用通配符选择器,以及减少嵌套选择器的使用。 3. **...

    JQuery源码详细中文注释_Jquery源码分析_

    1. 选择器:jQuery的核心之一是它的CSS选择器,如$("#id")、$(".class")等,这些选择器基于Sizzle引擎实现,能够高效地定位DOM元素。 2. 链式调用:jQuery对象返回的是一个包含多个DOM元素的集合,可以连续调用方法...

Global site tag (gtag.js) - Google Analytics