Javascript - 从排序DOM集合中获得的好处

时间:2012-05-21 15:15:48

标签: javascript sorting css-selectors

我正在处理我的个人项目,即创建一个javascript选择器引擎。引擎将使用CSS2 - CSS3语法来选择元素节点。我将我的引擎选择结果与其他选择器引擎的结果(主要是Sizzle)进行比较。我还将它与名为querySelectorAll(QSA)的原生选择器方法进行了比较。我注意到了一个区别。

文档的HTML结构就像这样简单:

<code><span></span></code>

我使用的选择器是:

  

'span,code'

当我使用Sizzle或QSA执行选择时,我得到的结果是:

[<code>...</code>, <span></span>]

当我使用我的选择器引擎时,结果如下:

[<span></span>, <code>...</code>]

似乎是,Sizzle和QSA根据文档中元素的位置对集合进行排序。我的选择器引擎不这样做。我发现,可以使用compareDocumentPosition和Array排序方法实现排序。显然这会对性能产生一些影响,尽管我还没有测试过。 (来源:http://ejohn.org/blog/comparing-document-position/)。

我想知道排序节点是否比“非排序”节点提供了一些好处。例如,当元素被排序时,将css样式添加到集合的节点(在循环中,即。)是否更有效。还有其他情况,使用有序集合可能会更好吗?

示例(elementNodes包含选择结果):

  

for(var i = 0,il = elementNodes.length; i&lt; il; i ++){

 elementNodes[i].style.height = '100px';

 elementNodes[i].style.width = '100px';

 elementNodes[i].style.background = 'red';
     

}

1 个答案:

答案 0 :(得分:0)

首先,我喜欢你在这里做的事情,尤其是你正在与其他开源引擎进行比较。

实际上这两个例子都是“排序”不同。

除非你找到一个令人信服的理由(我想不出一个)以与嘶嘶声相同的方式对你进行排序然后不要这样做。只要你了解你自己的引擎的顺序,你明确做了,而其他人也可以理解它,那么这就是最重要的。