迭代所有 DOM 元素的最有效方法

Question

不幸的是，我需要遍历页面的所有 DOM 元素，我想知道最有效的技术是什么。我可能会自己对这些进行基准测试，如果我有时间也可能会这样做，但我希望有人已经经历过这一点，或者有一些我没有考虑过的选项。

目前我正在使用 jQuery 并这样做：

$('body *').each(function(){                                                                                                                            
    var $this = $(this);                                                                                                                                
    // do stuff                                                                                                                                         
});

虽然它有效，但似乎会导致客户端出现一些延迟。也可以使用更具体的 jQuery 上下文（如 $('body', '*')）对其进行调整。我突然想到本机 Javascript 通常比 jQuery 快，我发现了这一点：

var items = document.getElementsByTagName("*");
for (var i = 0; i < items.length; i++) {
    // do stuff
}

我假设原生选项更快。想知道是否还有其他我没有考虑过的选择。也许是一个并行迭代子节点的递归选项。

Answer 1

您发布的 Vanilla Javascript 方式是最快的。它会比您发布的 jQuery 解决方案更快（请参阅我对问题的评论）。如果您没有在循环中删除或添加任何内容到 DOM 并且遍历顺序无关紧要，您也可以通过反向迭代来稍微加快它：

var items = startElem.getElementsByTagName("*");
for (var i = items.length; i--;) {
    //do stuff
}

编辑：检查此基准以了解使用本机代码可以节省多少时间：http://jsben.ch/#/Ro9H6

Answer 2

这通常不是一个好主意，但这应该可行：

function walkDOM(main) {
    var arr = [];
    var loop = function(main) {
        do {
            arr.push(main);
            if(main.hasChildNodes())
                loop(main.firstChild);
        }
        while (main = main.nextSibling);
    }
    loop(main);
    return arr;
}
walkDOM(document.body);

不包括文本节点：

function walkDOM(main) {
    var arr = [];
    var loop = function(main) {
        do {
            if(main.nodeType == 1)
                arr.push(main);
            if(main.hasChildNodes())
                loop(main.firstChild);
        }
        while (main = main.nextSibling);
    }
    loop(main);
    return arr;
}

已编辑！

Answer 3

更新：

不要使用$('body *') 来迭代元素。如果您使用 JQuery 方法，使用 $('*') 会快得多（有关详细信息，请参阅 cmets）。

---

Plain ol' JavaScript 相对来说要快得多。

使用test fiddle，我用 JQuery 处理 13000 个元素大约需要 30 毫秒，使用 JavaScript 处理 23000 个元素需要 8 毫秒（均在 Chrome 上测试）：

JQuery:      433  elements/ms
JavaScript:  2875 elements/ms

Difference:  664% in favor of plain ol' JavaScript

注意：除非您的页面上有非常多的元素，否则这不会产生太大影响。此外，您可能应该对循环中的逻辑进行计时，因为这可能是所有这一切的限制因素。

更新：

Here 是考虑更多元素（每个循环大约 6500 个）时的更新结果，使用 JQuery 在 1500 毫秒内我得到大约 648000 个元素，使用 JavaScript 在 170 毫秒内得到大约 658000 个元素。 （均在 Chrome 上测试）：

JQuery:      432  elements/ms
JavaScript:  3870 elements/ms

Difference:  895% in favor of plain ol' JavaScript

看起来 JavaScript 加速了，而 JQuery 保持不变。

Answer 4

这是 cmets 中描述的问题的解决方案（尽管不是实际问题）。我认为使用elementFromPoint 来测试要放置固定位置元素的区域会快得多，并且只担心该区域中的元素。一个例子在这里：

http://jsfiddle.net/pQgwE/4/

基本上，只需设置您要查找的元素的一些最小可能大小，然后扫描新的固定位置元素想要占据的整个区域。建立一个在那里找到的独特元素的列表，只需担心检查这些元素的样式。

请注意，此技术假定您要查找的元素具有最高的 z-index（这对于固定位置来说似乎是一个合理的假设）。如果这还不够好，那么可以在发现每个元素后对其进行调整以隐藏（或分配最小 z-index）并再次测试该点，直到找不到更多内容（可以肯定），然后恢复他们之后。这应该发生得如此之快以至于难以察觉。

HTML：

<div style="position:fixed; left: 10px; top: 10px; background-color: #000000; 
    color: #FF0000;">I Am Fixed</div>
<div id="floater">OccupyJSFiddle!<br>for two lines</div>

JS：

var w = $(window).width(), h=$(window).height(),
    minWidth=10,
    minHeight=10, x,y;

var newFloat = $('#floater'), 
    maxHeight = newFloat.height(),
    el, 
    uniqueEls=[],
    i;

for (x=0;x<w;x+=minWidth) {
    for (y=0;y<h&& y<maxHeight;y+=minHeight) {
        el = document.elementFromPoint(x,y);
        if (el && $.inArray(el,uniqueEls)<0) {
            uniqueEls.push(el);
        }
    }
}
// just for the fiddle so you can see the position of the elements 
// before anything's done
// alert("click OK to move the floater into position.");
for (i=0;i<uniqueEls.length;i++) {
    el = $(uniqueEls[i]);
    if (el.css("position")==="fixed") {
        el.css("top",maxHeight+1);
    }
}

newFloat.css({'position': 'fixed',
             'top': 0,
             'left': 0});

Answer 5

最快的方法似乎是document.all（注意它是一个属性，而不是一个方法）。

我已经修改了 Briguy 的答案以记录这些而不是 jQuery，并且它始终更快（比 document.getElementsByTagName('*')）。

The fiddle.

Answer 6

最高效：

const allDom = document.all || document.querySelectorAll("*");
const len = allDom.length;
for(let i=0; i<len; i++){
    let a = allDom[i];
}

https://jsben.ch/FwPzW