querySelectorAll vs NodeIterator vs TreeWalker - 最快的纯JS平面DOM迭代器[关闭]

Question

我想将 DOM 树扁平化为 Array。 结果应包括根作为第一个条目。 首选纯 JS 解决方案。 实现这一目标的最快方法是什么？

HTML结构示例：

<div class="tested-root">
    <span></span>
    <span></span>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
</div>

预期的输出是： [div.tested-root, span, span, div, span, span, div, span, span] 或类似的（这个是 DFS，但为了这个问题并不重要）。

从以下三种方法中哪个最快：

• querySelectorAll
• NodeIterator
• TreeWalker

Answer 1

我最近才来尝试其他一些。 下面是从最慢到最快的结果，同时指定一个比最快的慢。

基于 Chrome 的结果。 Safari 显示的数字大致相同。 Firefox 与该性能应用程序存在问题，未经过验证。

方法 1（不移位）~81% 慢

const list = Array.from(root.querySelectorAll('*'));
list.unshift(root);

方法 2（传播）~77% 慢

const list = [root, ...root.querySelectorAll('*')];

方法 3（NodeIterator）~32% 慢

const list = [];
const ni = document.createNodeIterator(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = ni.nextNode()) {
    list.push(next);
}

方法 4（TreeWalker）最快

const list = [root];
const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
let next;
while (next = tw.nextNode()) {
    list.push(next);
}

奖励（空根检查）慢约 1%（空根快约 98%）

const list = [root];
if (root.childElementCount) {
    const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
    let next;
    while (next = tw.nextNode()) {
        list.push(next);
    }
}

观察与结论

• 数组运算，如果/当考虑时，表明传播 (...) 运算符方式比 unshift 方法快
• 主要性能提升来自使用本机迭代器，TreeWalker 是迄今为止最快的
• 实现这种特殊的加速奖励几乎总是是合理的，对于嵌套结构，影响可以忽略不计，但对于空树，它的运行速度 两倍 快李>

可以在here找到基准测试。