我正在从事我的个人项目,即创建一个 javascript 选择器引擎。该引擎将使用 CSS2 - CSS3 语法来选择元素节点。我正在将我的引擎的选择结果与其他选择器引擎的结果(主要是 Sizzle)进行比较。我还将它与称为 querySelectorAll (QSA) 的 native 选择器方法进行了比较。我注意到一个区别。
文档的 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 < il; i++) {
elementNodes[i].style.height = '100px'; elementNodes[i].style.width = '100px'; elementNodes[i].style.background = 'red';
}
最佳答案
首先,我喜欢你在这里所做的事情,尤其喜欢你正在与其他开源引擎进行比较。
实际上,这两个示例的“排序”方式不同。
除非你找到一个令人信服的理由(我想不出一个)来按照与 sizzle 相同的方式对你的进行排序,否则不要这样做。只要你明白自己引擎的顺序,你明明白白,别人也能明白,这才是最重要的。
关于Javascript - 从排序 DOM 集合中获得的好处,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10687973/