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

我不是一个纯粹的前端开发人员，我想知道为什么，在一个循环中，在每次迭代中，一个元素被添加到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>

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);

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

没有自动优化，你需要照顾性能…

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;
}

相关内容

最新更新

热门标签：