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

我在回答一个问题，所以：

在这一点上，我遇到了javascript的奇怪工作方式

假设我们要动态添加MXN M=行，N=列

然后我们可以这样做：

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并使页面无响应

但是

为了使其适用于更高的维度，我使用了：

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速度较慢？还是别的什么

---

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

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

---

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

innerHTML在每次迭代时更新DOM。使用字符串连接，只需更新DOM一次。更新DOM需要一些资源到浏览器重新绘制UI…A。沃尔夫是完全正确的。你应该阅读浏览器回流。