Javascript querySelectorAll vs NodeIterator vs TreeWalker-最快的纯JS平面DOM迭代器

我想将DOM树展平为

数组

。 结果应包括根作为第一个条目。 首选纯JS解决方案。 实现这一目标的最快方法是什么

HTML结构示例：

预计产出为：

[div.tested-root，span，span，div，span，span，div，span，span]

或类似内容（这是DFS，但对于这个问题来说并不重要）

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

• querySelectorAll

• NodeIterator

• TreeWalker

---

最近我又来试了几次。 下面是从最慢到最快的结果，同时指定一个如何比最快的慢

基于铬的结果。Safari显示的数字大致相同。Firefox的perf应用程序存在问题，未经验证

方法1（取消移位）~81%的速度 方法2（扩散）~77%较慢 方法3（节点算子）~32%的速度

const list=[]；
const ni=document.createNodeInterator（根，NodeFilter.SHOW_元素）；
让我们下一步；
while（next=ni.nextNode（））{
list.push（下一步）；
}

方法4（树行者）最快

const list=[root]；
const tw=document.createTreeWalker（根，NodeFilter.SHOW_元素）；
让我们下一步；
while（next=tw.nextNode（））{
list.push（下一步）；
}

奖励（空根检查）~1%的速度降低（空根检查约98%） 观察和结论

• 如果考虑数组操作，则表明spread（

  …

  ）运算符方式比

  unshift

  方法更快
• 主要的性能增益来自于使用本机迭代器，

  TreeWalker

  是目前最快的迭代器
• 实现这种特殊的加速奖励几乎总是合理的，对于嵌套结构，这种影响是可以忽略的，但是对于空树，它会运行两次

---

可以找到台架测试。

请添加一个带有所需数组输出的简单HTML树。并向我们展示您以前尝试过的方法。，“有更好的想法吗？”-为什么方法2与您的问题中的方法完全相同？为了完整性起见，比较假设至少比较了2个操作数，因此将其添加为基础。“比较”是无意义的。这取决于文档的结构、浏览器、浏览器的版本、浏览器的内部结构、进行测量的程序/客户机、运行程序的硬件……很抱歉，您的说法显然是错误的。任何比较都取决于这些，但考虑到它们是相同的，唯一不同的是算法——算法是比较的。这是我们在这里比较的，其他的都是一样的。在大型DOM树上（>5k个元素），我在使用时获得了更好的性能（大约快4倍）。

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

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

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