当我们洋洋得意的使用jquery强大的选择器功能时有没有在意过jquery的选择性能问题呢,其实要想高效的使用jquery选择器,了解其实现流程是很有必要的,那么这篇文章我就简单的讲讲其实现流程,相信会为读者的jquery优化开发提供一些小的建议。
我们知道jquery的$()函数可以传很多种参数(document、string、fn、array、number),那么jquery的init方法就会根据你传参的类型的不同进入不同的流程。其他的我们今天就不多说了,我们重点讲一下对string类型的处理,因为只有它才会触发jquery的选择器功能。
1、首先是使用正则表达式检查是不是创建dom的操作,例如$(“<div></div>”),就是要创建div了;
2、否则就是选择操作,然后会判断是不是简单的id选择,当然这一步也是正则匹配,jquery在这里会毫不犹豫的调用document.getElementById,无疑,这是最快的选择了;
3、最后就是直接进入jQuery.fn.find()方法,这里就是jquery所引用的sizzle选择器放大光芒的地方了。
从上面我们可以看出来,jquery选择器只是对简单的id选择开了小灶,其他的css选择很大一部分需要借助于sizzle,所以说,这里总结一点,简单的id选择是jquery中最快的了。
有的人就说了,我不可能都用id选择器呀,别急,咱们再看看sizzle强大的选择功能吧。Sizzle是jquery从1.3版本开始引入的选择引擎。我们一般实现的选择的选择器模式(也包括jquery 1.2)都是Left To Right模式,而sizzle却别出新格,使用了Right To Left(以下我们简称RTL),说的是不是有点迷了,别急咱们结合例子给大家说明一下:
例 1:$(“div a”)
一般的选择流程(LTR):
1、选择页面中所有的div
2、选择div下的所有a标签
3、合并结果集,返回结果集
Sizzle的选择流程(RTL):
1、选择页面中所有的a标签
2、判断a标签的父节点是否为div标签,是则push,否则shift
3、返回结果集
有没有发现,RTL的选择模式其实是少了一个合并操作,不要小看这一步,其实节省了很多时间,这就是sizzle能够高效的选择结果集的诀窍之一,其实从sizzle的这一点就给了我们一个高效选择的建议,多使用Right To Left的选择模式。
下面咱们看一下这么一个选择:$('#test span'),相信很多人都是用过类似这种的选择模式,那么其实现流程呢?Jquery是通过$().find()方法启用sizzle的,上面写的这种模式会有一个函数判断启用find,然后才调用sizzle,那么咱们再看一看另外一种相同的选择:$(“#test”).find(“span”),这种方法则会跳过find函数判断,直接启用sizzle,这一点改变,执行效率能够提升8倍多,而且选择结果相同,大家可以使用firebug测试一下哟(使用console.profile("性能1")),这就给了我们另一个建议,多使用find方法代替css层级选择。
咱们再看一个选择方法:$('span:eq(0)'),通过firebug可以看到,这个选择方法调用了34次函数,而结果相同的 $('span').first()却只调用了14次,执行时间前者是后者的将近20倍,过滤函数的优化效应可见一斑呀。Sizzle在这里有一个判断,如果存在位置信息(例如 eq,first等)就会执行LTR选择模式,递归调用sizzle,大大降低执行效率,所以这里我建议,多使用过滤选择器,可以有效提高执行速度。
这里就简单的介绍到这里,其实我感觉只要能够做到上面的几点就能很好地提高jquery的选择速度了。
个人整理,欢迎评错。