jquery选择器的实现流程简析

jquery选择器的实现流程简析

当我们洋洋得意的使用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）：

、选择页面中所有的div

‚、选择div下的所有a标签

ƒ、合并结果集，返回结果集

Sizzle的选择流程（RTL）：

、选择页面中所有的a标签

‚、判断a标签的父节点是否为div标签，是则push，否则shift

ƒ、返回结果集

有没有发现，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的选择速度了。

个人整理，欢迎评错。