javascript - 遍历 DOM 的最快方法(广度优先)

Question

很抱歉，如果这听起来像是一个奇怪的需求。

用户可以创建一个包含任意数量、任意顺序的元素的 HTML 页面，Div 会被分配一个类。我无法控制订单的顺序或放置的位置。

我需要遍历 DOM 并使用特定于我的框架的类名在每个 div 上调用 init 函数。所以我不知道他们将被放置的顺序。

这是我面临的挑战:- 我正在使用递归 .children() Jquery 调用，然后迭代当前元素的每个子元素...我认为我需要找到一种更快的方法来执行此操作，这是对性能的影响。- 迭代时，$.each() 比标准 for 循环更快。我不知道为什么。对于较小的集合，$.each() 执行得更快吗？ (即大小 < 20 )

我的另一个选择是对每个类进行选择器，但我需要进行多次迭代，因为这不能保证顺序，因此迭代会抵消任何性能优势。

所以我的需求:- 一种性能更好的方法，首先遍历 DOM 广度。如果我能找到比 JQuery 函数更好的性能，那么普通的 Javascript 就可以了。

抱歉，我知道这听起来有点奇怪。非常欢迎任何建议。

Answer 1

首先，您不应该遭受巨大的性能影响。该问题可能出现在您的代码中的其他地方，但您没有向我们展示您当前拥有的内容，所以我无法说。也就是说，这是一个应该相当快的想法:

var classes = ["class1", "class2", "class3"];
i = classes.length, divs, j, curDiv;

while(i--) {
    divs = document.getElementsByClassName(classes[i]);
    j = divs.length;

    while(j--) {
        var curDiv = divs[j];
        // call some init function on the current div
    } 
}

如果这速度不快，那么您一定在其他地方遇到了问题(另外，不要忘记确保在文档加载后调用它)。

<小时/>

至于 $.each() 是否比标准 for 循环更快，这几乎是一条经验法则: native 代码比库代码更快(但库代码通常更方便)。在本例中也是如此；您的平均 for 循环将比 $.each() 快得多。