jQuery Sizzle
来源:互联网 发布:斯坦纳树算法详解 编辑:程序博客网 时间:2024/05/25 16:37
实际上,选择器引擎的运用对于页面性能起了至关重要的作用。使用合适的选择器表达式可以轻易的提高性能、增强语义并简化逻辑,而你所需要做的,不过是培养几个习惯而已。
使用率统计数#id51.290%1431.class13.082%365tag6.416%179tag.class3.978%111#id tag2.151%60tag#id1.935%54#id:visible1.577%44#id .class1.434%40.class .class1.183%33*0.968%27#id tag.class0.932%26#id:hidden0.789%22tag[name=value]0.645%18.class tag0.573%16[name=value]0.538%15tag tag0.502%14#id #id0.430%12#id tag tag0.358%10
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
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);
}
如果选出结果不发生变化的话,不妨缓存选出的jQuery对象,哪怕只有一会儿。比如下面的代码里,这种性能差异就被循环放大了,养成缓存jQuery对象的习惯可以让你在不经意间就完成主要的性能优化。其他建议习惯
函 数getElementsByName。虽然在IE和Opera里,指定了name但未指定id的DOMElement也会可以使用
getElementById得到,但是在jQuery里,为了保证跨浏览器,$("#id")会多做一次判断,把这些不一致的结果给过滤掉。所以
name选择器成了jQuery下的唯一选择。
3.选择同一type的input元素使用[:type]
这是唯一符合需要的简单写法。
4.有条件的使用反向选择器,反向选择器是指类似于”:not(exp)”的表达式。反向选择器实际上性能并不比同逻辑的正向选择器差很多。而在一些情况
下,为了达到反向选择器的效果,
我们或许要写出很复杂的表达式,或需要添加额外的类,或需要选出结果后再筛选一遍。这都不如使用反响选择器,无论是在性能上还是在保持逻辑的简单上。而
jQuery 1.3里,反向选择器得到了增强,之前只可以接受简单的反向表达式。关于jQuery 1.3的变化,大家也可以参考( jQuery1.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
在”最常用的选择器使用”比之前版本的引擎更快。(什么是”最常用的选择器使用”,请参见 http://ejohn.org/blog/selectors-that-people-actually-use)
实际上,选择器引擎的运用对于页面性能起了至关重要的作用。使用合适的选择器表达式可以轻易的提高性能、增强语义并简化逻辑,而你所需要做的,不过是培养几个习惯而已
- jQuery Sizzle
- jQuery 的 Sizzle 选择器
- jQuery Sizzle选择器
- jquery选择器引擎Sizzle
- 【jQuery源码系列】Sizzle
- 初探 jQuery 的 Sizzle 选择器
- jquery 实现原理三:sizzle
- 初探 jQuery 的 Sizzle 选择器
- jQuery Sizzle 入口 [ 源码分析 ]
- jQuery Sizzle.find [ 源码分析 ]
- 理解jQuery选择器与Sizzle
- jquery 选择器引擎sizzle浅析
- jQuery中的Sizzle引擎分析
- jQuery中的Sizzle引擎分析
- Sizzle
- 养成使用jQuery Sizzle选择器的良好习惯
- jQuery选择器引擎和Sizzle介绍
- JQuery日记 5.11 Sizzle选择器(五)
- 让Mootools的语法结构像Jquery那样
- 终于对Google Map API v3.0有了一个全新的认识
- 從此不再談jquery,马上忘掉他开始学Mootools
- 数据库中的三范式
- Activity生命周期
- jQuery Sizzle
- 全球前 40 名的网站用的是什么编程语言
- 关于Jquery内存的释放
- 一个单引号引发的MYSQL性能损失
- 剛建立了一个QQ群用来讨论Mootools
- 素数知识——HDU 4196
- 解决Firefox的Sync不能同步的问题
- 如何删除cookie
- 高性能javascript