Question

我不是一个纯粹的前端开发人员，我想知道为什么，在每次迭代中将一个元素添加到DOM的循环中，生成的DOM仅在循环结束时可见而不是逐步显示。

<html>
<body>
    <div id="body"></div>
</body>
<script>
    for(var i = 0; i < 1000000; i++){
        document.getElementById('body').appendChild(document.createElement('br'));
        document.getElementById('body').appendChild(document.createTextNode(i));
    }
</script>
</html>

Answer 1

Javascript在重绘事件处理之前运行代码完成。因此，为了定期更新显示，您需要定期结束脚本执行，并在事件队列中放入一些内容，以回调您的函数以便继续进行。

例如，您可以使用setTimeout：

执行此操作

(function loop(i) {
    if (i > 10000) return; // end condition
    document.body.appendChild(document.createElement('br'));
    document.body.appendChild(document.createTextNode(i));
    void document.body.offsetWidth;
    setTimeout(loop.bind(null, i+1), 0);
})(0);

Answer 2

这是逐步添加的，可能迭代足够快，你无法在控制台中看到发生了什么......

没有自动优化，你需要照顾表演......

function TestCtrl() {
  var body = document.body;
  var child = function() {
    var c = document.createElement('div');
    c.className = 'child';

    return c;
  };
  
  
  function Logger() {
    console.log('log new element');
  };
  document.addEventListener("DOMNodeInserted", Logger);
  
  for(var i = 0; i < 100; i++) {
    console.log('adding element', i);
    body.appendChild(child());
  }
}

document.addEventListener('DOMContentLoaded', TestCtrl);

.child {
  height: 20px;
  margin-bottom: 5px;
  background: yellow;
}
.child:nth-child(even) {
  background: pink;
}

在每次迭代时向DOM添加一个元素，而不是在循环结束时添加所有元素

2 个答案: