Sizzle是怎样工作的

作为闻名遐迩的选择器，Sizzle 并不是人们所说的从右到左选择那么简单的。本文将揭开其神秘的内幕，让大家看看其令人惊叹的优化。

在此之前，大家必需有一些概念，否则无法勾勒其轮廓。这些概念我在做类似的事，一点点总结出来的。总的来说，有如下几个：种子选择器，候选集，映射集，迭代器，过滤器，切割器，选择时间……

由于CSS选择器的种类是如此繁多，加上jQuery的自定义伪类就更多，因此它们组成的表达式一定要加以拆分，才能工作。我们就拿一个简单的CSS表达式着手吧。

div div.aaa 就是我们的小白鼠，大抵它可以拆分为四个部分，标签选择器，后代选择器，标签选择器与类选择器。但Sizzle一开始并没有这样做，请见下面Sizzle的切割器 部分

parts = [],
   soFar = selector;
  //chunker 的正则会用不在双引号单引号之内的后代亲子相邻兄长并联（' ','>','+','~',','）作为切割符，
  //从左到右切割表达式，并在第一个并联选择器之时结束。
  //比如"li[name=ee]>span.aaa, div span" 会变成parts = ["li[name=ee]",">","span.aaa"], extra = "div span"
   do {
       chunker.exec( "" );
       m = chunker.exec( soFar );
       if ( m ) {
           soFar = m[3];
           parts.push( m[1] );
           if ( m[2] ) { //如果是并联选择器,中断
                extra = m[3];
               break ;
           }
       }
   } while ( m );

单从这点，这种切割方法就注定其不可能是单纯的从右到左选择，它可能是从中间到左进行。

接下来有许多分支，分别是对ID与位置伪类进行优化的，我们暂时跳过它们。看其另外几个重要概念，种子选择器与候选集，候选集你也可以称之为种子 集，因为sizzle中就有这么一个单词seed。为了获取候选集，我们需要调一个种子选择器Sizzle.find。重要的参数是并联选择器前面的那个 子选择器模块，若根据上面的例子，它就是那个"span.aaa"。"span.aaa"的组成部分在标准浏览器下都可以用原生API来获取。除去后来的 那两个querySelector,querySelectorAll，HTML文档一共有这么四个API：

• getElementById，上下文只能是HTML文档。
• getElementsByName，上下文只能是HTML文档。
• getElementsByTagName，上下文可以是HTML文档，XML文档及元素节点。
• getElementsByClassName，上下文可以是HTML文档及元素节点。IE8还没有支持。

那我们是先取span还是.aaa，就要视原生API获取元素节点的数量而定，更直白地说，数量越少，后面过滤起来越轻松，John Resig不是傻瓜，肯定在这里做点优化。这个原生选择器的调用顺序被放到一个叫Sizzle.selectors.order的数组中，对于旧一点的浏 览器，其顺序为ID,NAME,TAG,对于支持getElementsByClassName的浏览器，其顺序为ID,CLASS,NAME,TAG。 种子选择器Sizzle.find会调用相应的正则去切割它，并进行进一步的处理放进原生API中去获取节点。当然不如意的情况还有许多，如碰到选择器群 组是"[href='aaa']:target"的情况，我们唯有把文档的所有节点充当获选集了。

Sizzle.find = function ( expr, context, isXML ) {
    var set;
    if ( !expr ) {
        return [];
    }
    for ( var i = 0, l = Expr.order.length; i < l; i++ ) {
        var match,type = Expr.order[i];
        if ( (match = Expr.leftMatch[ type ].exec( expr )) ) {
            var left = match[1];
            match.splice( 1, 1 );
            if ( left.substr( left.length - 1 ) !== "\\" ) {
                match[1] = (match[1] || "" ).replace(/\\/g, "" );
                set = Expr.find[ type ]( match, context, isXML );

                if ( set != null ) {
                    expr = expr.replace( Expr.match[ type ], "" );
                    break ;
                }
            }
        }
    }
    if ( !set ) {
        set = context.getElementsByTagName( "*" );
    }
    return { set: set, expr: expr };
};

经过种子选择器后，原选择器群组可能还留下一点小尾巴，如上面的例子，在FF会留下"span"。这时轮到五大迭代器出场了。在我的体系中，我分别 把它们取名为border,borders,father,fathers,current，在Sizzle里具体对应 Sizzle.selectors.relative["+"]，Sizzle.selectors.relative["~"]，Sizzle.selectors.relative[">"]，Sizzle.selectors.relative[""] 及Sizzle.filter。Sizzle.filter在father与fathers还充当过滤器。我们还是先看current迭代器吧。 current迭代器的意思应该很易懂，只对于当前集合的元素进行或过滤或置换处理。

Sizzle.filter = function ( expr, set, inplace, not ) {
//set必须是数组，inplace为true时用于其他迭代器，not只用于最简单的反选选择器
    var match, anyFound,
        old = expr,
        result = [],
        curLoop = set,
        isXMLFilter = set && set[0] && Sizzle.isXML( set[0] );
    while ( expr && set.length ) {
        for ( var type in Expr.filter ) {
//这里是除关系选择器与并联选择器的其他选择器类型，其中还把位置伪类从伪类中独立出来
//CLASS,ID,TAG,CHILD,ATTR,PSEUDO,POS
            if ( (match = Expr.leftMatch[ type ].exec( expr )) != null && match[2] ) { //取得过滤参数
                var found, item,
                    filter = Expr.filter[ type ], //取得过滤函数
                    left = match[1];
                anyFound = false ;
                match.splice(1,1);
                if ( left.substr( left.length - 1 ) === "\\" ) {
                    continue ;
                }
                if ( curLoop === result ) {
                    result = []; //这里用于缩小候选集时
                }
                if ( Expr.preFilter[ type ] ) {
               //Expr.preFilter里面的函数都用于进一步加工过滤参数，对于类选择器，出于优化需要，直接进行过滤（它返回false）
                    match = Expr.preFilter[ type ]( match, curLoop, inplace, result, not, isXMLFilter );
                    if ( !match ) { //处理CLASS
                        anyFound = found = true ;
                    } else if ( match === true ) { //处理POS
                        continue ;
                    }
                }
                if ( match ) { //处理CLASS、POS之外的类型
                    for ( var i = 0; (item = curLoop[i]) != null ; i++ ) {
                        if ( item ) { //如果item不为false
                            found = filter( item, match, i, curLoop ); //此值为布尔
                            var pass = not ^ !!found; //此值为布尔

                            if ( inplace && found != null ) {
                                if ( pass ) {
                                    anyFound = true ;

                                } else {
                                    curLoop[i] = false ;
                                }

                            } else if ( pass ) {
                                result.push( item ); //这里用于构建一下循环的数组
                                anyFound = true ;
                            }
                        }
                    }
                }
                if ( found !== undefined ) {
                    if ( !inplace ) {
                        curLoop = result;
                    }
                    expr = expr.replace( Expr.match[ type ], "" ); //削减CSS表达式直到变为空字符串
                    if ( !anyFound ) {
                        return [];
                    }

                    break ;
                }
            }
        }
        // Improper expression
        if ( expr === old ) { //如果到最后正则也不能动CSS表达式一条毫毛，说明此CSS表达式有问题
            if ( anyFound == null ) {
                Sizzle.error( expr );

            } else {
                break ;
            }
        }
        old = expr;
    }
    return curLoop; //这里用于其他迭代器
};

嘛，简单来说，此迭代器有两种形态。一是当inplace为undefined时，它会不断缩减集合的数量。如[ [object HTMLDivElement], [object HTMLDivElement], [object HTMLDivElement], [object HTMLDivElement] ]缩减成[ [object HTMLDivElement] ]一个，被操作的集合为候选集本身。另一种是inplace为true时，它不会缩减集合的数量，但会将不符合的节点置换为false，若在 fathers迭代器中，符合条件的节点还会变成其某一个祖先，borders则变成其某一个 previousSiblingElement，border与father相仿，总之会面目全非。这种情况是应用于映射集，映射集与候选集的数量总是相 等。在Sizzle，映射集的变量名为checkSet。

好了，总之到下面这一段代码，span选择器已被搞掉了。

set = ret.expr ?Sizzle.filter( ret.expr, ret.set ) :ret.set;

这时候候选集的数量已少到不能最少，我们需要设置一个映射集：

checkSet = makeArray( set );

现在我们就来处理其他子选择器群集，它们都是以关系选择器间隔开的。

while ( parts.length ) {
  cur = parts.pop(); //取得关系选择器
  pop = cur;
  if ( !Expr.relative[ cur ] ) {
    cur = "" ; //如果不是则默认为后代选择器
  } else {
    pop = parts.pop(); //取得后代选择器前面的子选择器群集
  }
  if ( pop == null ) {
    pop = context;
  }
  Expr.relative[ cur ]( checkSet, pop, contextXML ); //根据其他四种迭代器改变映射集里面的元素
//得到诸如[ [object HTMLDivElement] ,false, false, [object HTMLSpanElement] ]的集合
}

最后一步就是根据映射集甄选候选集。

for ( i = 0; checkSet[i] != null ; i++ ) {
                  if ( checkSet[i] && checkSet[i].nodeType === 1 ) {
                      results.push( set[i] );
                  }
 }

如果存在并联选择器，那就再调用Sizzle主函数，把得到的两个结果合并去重就是。

嘛，以上就是Sizzle的基本流程了，其他迭代器，过滤器的解读应该没有难度，有空再说。下再重新把大纲罗列一下结文：

• 将CSS表达式切割到第一个并联选择器为止，得到的数组是按子选择器群集，关系选择器，子选择器群组，关系选择器.....的顺序排列。
• 将最后一个选择器放进种子选择器(Sizzle.find)，得到最佳的候选集。
• 如果刚才的子选择器群组还残留什么，就放到current迭代器，把候选集的元素个数缩小（减少过滤基数）。
• 然后根据候选集克隆一个映射集，用于放进其他迭代器的过滤函数中进行筛选，不符合者将置换为false，符合者置换其兄长祖先。
• 最后根据映射集甄选候选集，如果存在并联选择器，重复刚才的事，两者合并排序去重返回。