JavaScript 循环缓慢(>两分钟)用于解包数组

Question

我有一些JSON数据来自我的JavaScript通过XHR接收的查询。这是我收到的数据的结构：

[{
"date": "17 February 1806",
"dinnerID": "h1806-02-17a",
"note": "...",
"diners": {
"name": [
[
"Lord Gilbert Elliot-Murray-Kynynmound"
],
[
"Humble Mr  Elliot"
],
[
"Mr  Allen"
],
[
"Lady  Holland"
],
[
"Lord  Holland"
]
]
}
}
[etc...]
]

对我的结果进行迭代可以得到一些结果，比如高达200/300。如果我有一个查询有更多的结果(最多可以达到1000左右(，那么在收到XHR响应后，浏览器会在两分钟以上没有响应。您可以在控制台中看到记录的条目一个接一个地"缓慢"滚动。这是一个结构性的限制，还是我能做些什么？

// for (let i = 0; i < result.length; i++){ // These three variants
// for (let [i, val] of Object.entries(result)) { // don't make n appreciable difference
for (var dinner of result) { // to the time the loops takes to complete.
document.getElementById("resultSearch").innerHTML += '<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modal-' + result.dinnerID + '">' + result.date + '</button>'
console.log(dinner)
}

编辑

将html填充放在循环之外会产生很大的不同。

现在，我还在为每个结果构建一个模态。不幸的是，我似乎无法正确地附加它。我得到了模态本身的一系列[object HTMLDivElement]。我的代码：

let links = ''
let modals = ''
for (var dinner of result) {
let modal = ['<div class="modal-dialog" role="document">',
'<div class="modal-content">',
[etc..]
'</div>',
'</div>'].join('');
let divModal = document.createElement('div');
divModal.setAttribute(...)
...
divModal.innerHTML = modal;
modals += divModal
let button = document.createElement('button')
button.setAttribute(...)
...
button.innerHTML = dinner.date
links += button
}
document.getElementById("resultSearch").innerHTML += modals
document.getElementById("resultSearch").innerHTML += links

我应该在最后两条指令中也使用appendChild吗？在这种情况下，我得到Argument 1 is not an object。

编辑2和工作代码

我通过将appendChild代码放入循环中来解决问题：

let fragmentLinks = document.createDocumentFragment();
fragmentLinks.appendChild(button);
targetLinks.append(fragmentLinks)

尽管我在每次迭代中都调用CCD_ 5，但与最初的>分钟所以，我认为fragment确实让事情变得更快。

Answer 1

DocumentFragment并不比innerHTML快，请在循环外使用.innerHTML。

var htmlString = ''; 
for (var dinner of result) {
htmlString += '<button type="button" class="btn btn-link" data-bs-toggle="modal" data-bs-target="#modal-' + result.dinnerID + '">' + result.date + '</button>'
}
document.getElementById("resultSearch").innerHTML += htmlString;

Answer 2

感谢@GrahamRitchie，我把appendChild代码放在循环中解决了这个问题。

let fragmentLinks = document.createDocumentFragment();
fragmentLinks.appendChild(button);
targetLinks.append(fragmentLinks)

尽管我在每次迭代时都调用appendChild，但与最初的>分钟所以，我想，碎片确实会让事情变得更快。