Question

我在SO上回答了一个问题：

因为我遇到了javascript的奇怪工作。

假设我们要动态添加MXN（M =行，N =列）<div>'s，

然后我们可以这样做：

var count = 0;

function addTbl(m, n) {
  var div = document.getElementById("tbl_div");
  div.innerHTML = "";
  for (var i = 0; i < m; i++) {
    for (var j = 0; j < n; j++) {
      count++;
      div.innerHTML += "<div>" + count + "</div>";
    }
  }
}

看起来没问题，当M，N很低时（并且<50），工作正常。但是当它增加超过该限制时，它会挂起UI并使页面无响应。

BUT

为了让它适用于我曾经使用的更高维度：

var count = 0;

function addTbl(m, n) {
  var div = document.getElementById("tbl_div");
  div.innerHTML = "";
  var p = "";
  for (var i = 0; i < m; i++) {
    for (var j = 0; j < n; j++) {
      count++;
      p += "<div>" + count + "</div>";
    }
  }
  div.innerHTML = "" + p + "";
}

它可以在250X250下进行良好测试。

为什么？

这是否意味着.innerHTML更慢？还是其他什么？

希望这里的专家能帮助我。提前谢谢。

Answer 1

正如第一个示例中的注释中所指出的，您每个周期都在更新DOM。在第二个例子中，这只发生一次。

因此innerHTML并不慢，但每次使用它时都可以将其视为浏览器重绘页面，经常使用更多资源。

在循环中使用innerHTML会挂起UI（有时无响应的页面），但循环外的相同innerHTML不会挂起UI

1 个答案: