Javascript 使用innerHTML和+=

我目前正在从数据库中检索大量信息，并希望将这些信息显示为网站上的缩影。从数据库中收集的每一行都包含一幅图像和一些出现在缩影中的其他信息

收集信息时，我使用一个名为printAllMini的函数，该函数使用printMini为每行信息将所有div打印到容器中

printAllMini=function（）{
console.log（“打印！”）；
document.getElementById（“mini_块”）.innerHTML=“”；
对于（变量i=0；i}

不要在循环的每次迭代中查找

document.getElementById（“mini_blocks”）

然后设置

.innerHTML

——尝试将值存储在全局变量中（例如我在这里使用的

printminResult

），然后只设置一次

.innerHTML

var printMiniResult=“”；
printAllMini=函数（）{
console.log（“打印！”）；
对于（变量i=0；i

在创建div时，是否存在使+=方法变慢的因素

是的，但不仅仅是DIVs。字符串串联代价高昂，而且通常会产生糟糕的性能。当字符串长度增加或执行更多操作（串联）时，您开始注意到这种性能

有没有一个原因可以解释为什么直到最后一刻才有人出现

解释一下

我是网络编程新手。有更好的方法做同样的事情吗

您可以使用各种克隆对象的技术，或者只创建一次字符串。如果你想进入更好的前端解决方案，你应该看看web框架/库，比如React或Angular

如何改进代码使用的一个示例是通过构建数组放弃循环中的字符串连接。然后可以通过在空字符串上连接来连接数组的所有元素：（例如，

['begin'，'end']）。连接（'''

）

1）是的。每次重新创建元素时都会重新计算DOM。此外，连接长字符串可能需要时间

2） 首先执行JavaScript，然后呈现页面。对于这些任务，浏览器只有一个线程

3） 是的，有更好的方法。或者他们。这通常是更多的代码，但更快的结果

---

如果很难摆脱字符串来创建HTML，请使用而不是

innerHTML

。它更快，因为它不重新创建元素。如果可能的话，创建一个尽可能大的HTMLString，只将一个字符串放到DOM中，这样可以显著减少重新计算的时间。

1:In-javascript字符串是。因此，每次修改字符串时，实际上是在创建字符串的副本，并将更改附加到该字符串。随着字符串的增长，这可能需要很多时间

2：在javascript完成执行之前，浏览器不会呈现HTML。您可以处理几个div，然后产生控制，并使用超时来继续处理

---

3：不要使用大量字符串创建HTML。我建议使用模板驱动的方法。您可能需要查看Reactjs或Angular。否则，请使用dom方法创建节点并将它们附加到dom中。

如果速度太慢，为什么不先存储字符串（使用全局变量），然后在循环完成后才设置

。innerHTML

？我觉得自己没有尝试过这一点很愚蠢。谢谢使用数组的好主意-你介意我捏一下它，并把它作为我答案的一部分吗？@freefaller说吧。这个答案更多的是一个评论，它会占用太多的行（我可能会在你修改后删除）