0

对不起，如果这听起来像一个奇怪的需求。

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

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

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

我的另一种选择是在每个类上做一个选择器，但我需要做几次迭代，因为这不能保证排序，所以迭代抵消了任何性能优势。

所以我的需要： - 首先遍历 DOM 广度的更好的执行方式。如果我能找到比 JQuery 函数更好的性能，那么普通的 Javascript 就可以了。

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

4

3 回答 3

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循环快，这几乎是一个经验法则：本机代码比库代码快（但库代码通常更方便）。在这种情况下也是如此；您的平均for循环将比$.each().

于 2012-10-31T00:07:08.327 回答
1

这里有一些更简洁的东西，有一些当前的语法。

    function bfs(root) {
      const queue = [];
      while (root) {
        console.log(root);
        [...root.children].forEach(child => queue.push(child));
        root = queue.shift();
      }
    }

    bfs(document.body);
    <html>
      <head>
        <title>Breadth First</title>
      </head>

      <body>
        <div class="a">
          <div class="aa">
            <span class="aaa"></span>
            <span class="aab"></span>
          </div>
        </div>
        <div class="ab">
          <span class="aba"></span>
          <span class="abb"></span>
        </div>
        <script src="main.js"></script>
      </body>
    </html>

于 2019-04-07T03:55:59.713 回答
0

对于广度优先树遍历...

const html = `<div class="a">
    <div class="aa">
        <span class="aaa">
        </span>
        <span class="aab">
        </span>
    </div>
    <div class="ab">
        <span class="aba">
        </span>
        <span class="abb">
        </span>
    </div
</div>`;

const parser = new DOMParser();
const doc = parser.parseFromString(html, "text/html");

function BFT_dom(root) {

    const queue = [];
    let currentEl = root;

    while(currentEl) {
      console.log(currentEl) // Do something to element here

      for(let i = 0; i < currentEl.children.length; i++) {
          queue.push(currentEl.children[i]);
      }
      currentEl = queue.shift();
  }

}

BFT_dom(doc)
于 2018-07-05T15:42:18.077 回答