javascript - 使用 innerHTML 和 += 缓慢创建 div

Question

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

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

printAllMini = function() {
    console.log("PRINTING!");
    document.getElementById("mini_blocks").innerHTML = "";
    for (var i = 0; i < docs.length; i++) {
	var object = docs[i];
	printMini(object.id, object.arrived, object.booked, object.verification, object.org, object.price, object.stax, object.pic);
	console.log(i);
    }
    console.log("DONE!");
}

printMini = function(id, arrived, booked, verification, org, price, stax, pic) {
    if (verification != "-") {
	// So that no string is empty
	if (id == "") { id = "-"; }
	if (arrived == "") { arrived = "-"; }
	if (booked == "") { booked = "-"; }
	if (verification == "") { verification = "-"; }
	if (org == "") { org = "-"; }
	if (price == "") { price = "-"; }
	if (stax == "") { stax = "-"; }
	document.getElementById("mini_blocks").innerHTML += '<div class="mini" id="\'' + id + '\'" onclick="changeInfo(\'' + arrived + '\', \'' + booked + '\', \'' + verification + '\', \'' + org + '\', \'' + price + '\', \'' + stax + '\', \'' + id + '\'), getPDF2(\'' + id + '\')"> <div class="mini_header"> <table class="mini_table"> <tr> <td align="left"> <b>Inkommen</b> </td> <td align="right"> <b>ID</b> </td> </tr> <tr> <td align="left">' + arrived + '</td> <td align="right">' + id + '</td> </tr> </table> </div> <div class="mini_img"> <img src="data:image/jpeg;base64,' + pic + '"> </div> <div class="mini_footer"> <table class="mini_table"> <tr> <td align="left"> <b>Bokförd</b> </td> <td align="right"> <b>Verifikat</b> </td> </tr> <tr> <td align="left">' + booked + '</td> <td align="right">' + verification + '</td> </tr> </table> </div> </div>';
    }
    else {
	document.getElementById("mini_blocks").innerHTML += '<div class="mini" id="\'' + id + '\'" onclick="changeInfo(\'' + arrived + '\', \'' + booked + '\', \'' + verification + '\', \'' + org + '\', \'' + price + '\', \'' + stax + '\', \'' + id + '\'), getPDF2(\'' + id + '\')"> <div class="mini_header2"> <table class="mini_table"> <tr> <td align="left"> <b>Inkommen</b> </td> <td align="right"> <b>ID</b> </td> </tr> <tr> <td align="left">' + arrived + '</td> <td align="right">' + id + '</td> </tr> </table> </div> <div class="mini_img"> <img src="data:image/jpeg;base64,' + pic + '"> </div> <div class="mini_footer2"> </div> </div>';
    }
}

问题:

然而，这真的很慢，需要超过 45 秒才能完成。这似乎与这条线有关:

document.getElementById("mini_blocks").innerHTML += '<div'>;

...因为创建 div 的时间越来越长。前 10 个 div 是在第一秒内创建的，但到最后，大约每秒创建一个 div。它只会变得越来越慢。

此 gif 显示了该过程的前几秒以及每个 div 完成的时间:GIF

我试过了(注意 = 前面的 + 号) document.getElementById("mini_blocks").innerHTML += '<div>'

...这要快得多，它做同样的事情但替换了所有以前的 div，所以我最后只得到一个 div。这几乎是瞬时的!

我还注意到，在所有 div 完成之前，没有任何 div 出现，我不知道为什么。

实际问题:

1. 在创建 div 时，是否存在使 += 方法变慢的原因？
2. 有没有一个 div 直到最后才出现的原因？
3. 我是网络编程新手。有没有更好的方法来做同样的事情？

Answer 1

1. Is there something that makes the += method slow when creating divs?

是的，但不仅仅是 DIV。字符串连接很昂贵，而且通常会产生很差的性能。当字符串长度增加或执行更多操作(串联)时，您会开始注意到这种性能。

2. Is there a reason why none of the divs shows up until the very end?

解释。

3. I'm new to web-programming. Is there better ways to do the same thing?

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

如何仅使用您的代码进行改进的一个示例是通过构建数组放弃循环中的字符串连接。然后，您可以通过加入一个空字符串来连接数组的所有元素:(例如 ['begin','end'].join(''))