追加和清空大型列表时的性能

Question

我有几个问题，但我相信它们都是相关的。 从本质上讲，当列表大小大于 1 时，Chrome 83 附加到大型选择列表的速度非常慢。

下面演示了我的问题。 所有时间都是许多测试的粗略平均值。 所有测试都是在测试计算机上仅打开一个选项卡且后台活动最少的情况下完成的。

铬 83

• 追加单次：90ms
• 追加多：12,000ms
• 空：100ms

铬 81

• 追加单次：90ms
• 追加多：6,000ms
• 空：7,000ms

火狐 68

• 追加单次：34ms
• 附加多：35ms
• 空：7,000ms

野生动物园 13

• 追加单次：30ms
• 附加多：40ms
• 空：5ms

由此看来，Chrome 81 -> Chrome 83 的"追加多"性能明显下降，而"空"则显着改善。 Firefox 的追加性能比任何 Chrome 版本都要高得多，但在清空方面同样很差。

我也对文档片段进行了尝试，但性能在所有条件下通常都较差。

除了"不使用巨型选择列表"之外，这里还有什么可以修改以提高追加、删除或两者的性能吗？

var start;
function startTimer() {
start = new Date();
}
function stopTimer() {
document.getElementById("duration").innerHTML = (new Date() - start);
}
function append(id) {
var select = document.getElementById(id);
startTimer();
var text = "";
for (var i = 0; i < Number(document.getElementById("optionCount").value); i++) {
text += "<option>" + "Value-is=" + i + "</option>";
}
select.innerHTML = text;
stopTimer();
return false;
}
function empty() {
startTimer();
document.getElementById("multiSelect").innerHTML = "";
document.getElementById("singleSelect").innerHTML = "";
stopTimer();
}

<div id="banner-message">
# of options: <input type="text" id="optionCount" value="25000"/><br/><br/>

Multi-select list: <select id="multiSelect" size="5"></select><br/>
Single select list: <select id="singleSelect"></select><br/>
<br/><br/>
Duration: <span id="duration"></span> ms
</div>
<br/>
<button onclick="append('multiSelect')">Append Multi</button>
<button onclick="append('singleSelect')">Append Single</button>
<button onclick="empty()">Empty Both</button>

编辑：报告的 https://bugs.chromium.org/p/chromium/issues/detail?id=1094911

Answer 1

这是一个有趣的问题。我打开了您的代码段并使用Chrome DevTools的性能选项卡对其进行了检查，它显示了非常大的累积布局偏移。虽然这本身不是问题，但它确实意味着Chrome出于某种原因将其定性为某种布局更改。

这可能是因为多选选项的元素确实更新了大量内容，但实际上没有一个内容可见，因为它位于选择框之外。

这个问题很可能是Chrome错误，您无法解决。 :(