Question

我有一个循环，我通过<div>将大约500个document.getElementById(target).appendChild(docFragmentDiv)插入到DOM中，每个<div>可能有20或30个后代。我可以插入最多大约100个，但是如果有200多个插入内容，那么在DOM更新时页面会暂时冻结。

我怎样才能避免这种窒息？现在我设置了一个间隔设置，每个间隔插入50个间隔，间隔间隔25毫秒。有更好的方法吗？

Answer 1

您应该使用innerHTML，并且只应使用一次。

为了获得最佳效率，您应该使用循环在一个字符串数组中组合HTML，然后编写document.getElementById(target).innerHTML = htmlPieces.join()

Answer 2

使用像SLaks这样的innerHTML建议会起作用，但是最好的做法是创建一个文档片段，将所有div节点附加到那个节点，然后将文档片段附加到主文档。

var docFrag = document.createDocumentFragment（）;

for（var i = 0; i＆lt; 500; i ++）{
docFrag.appendChild（使用document.createElement（ “DIV”））;
}

的document.getElementById（目标）.appendChild（docFrag）;

Answer 3

innerHtml（）几乎总是比appendChild（）快。

查看QuirksMode's benchmarking的实数。

修改：您是否有理由在间隔时间内添加它们而不是一次性添加它们？我认为SLaks一次就能做到这一点。

Answer 4

我不确定这是否会更快，但这是我尝试的第一件事：

不是将它们全部添加到页面中，而是将它们全部添加到尚未添加到页面的容器中，然后将该容器添加到页面中。

如果这样可以提高性能，那么您可以根据需要对其进行修改。

Answer 5

请注意，在最后一刻之前，您没有将appendChild用于实际文档。换句话说，如果你正在做：

var div1 = document.createElement("div");
document.body.appendChild(div1);

for (var i=0; i<500; i++) {
  var div = document.createElement("div");
  div1.appendChild(div);
}

然后，您每次重绘整个页面在该循环中进行迭代。

更好的是，如果您正在使用DOM方法，请将其反转：

var div1 = document.createElement("div"); for (var i=0; i<500; i++) { var div = document.createElement("div"); div1.appendChild(div); } document.body.appendChild(div1);

现在您正在将div绘制到屏幕外缓冲区，并且只重绘一次页面。

插入许多DOM元素扼流圈

5 个答案: