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

Question

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

以下说明了我的问题。所有的时间都是许多测试的粗略平均数。所有测试都是在测试计算机上只使用一个打开的选项卡和最小的后台活动来完成的。

Chrome 83

• 附加单: 90ms
• 附加:12,000毫秒
• 空:100毫秒

Chrome 81

• 附加单: 90ms
• 附加:6000毫秒
• 空:7,000毫秒

Firefox 68

• 附加单:34
• 附加多个:35 Multi
• 空:7,000毫秒

Safari 13

• 附加单:30
• 附加多:40毫秒
• 空: 5ms

从这一点来看，Chrome 81 -> Chrome 83的“附加多”的性能出现了显著的倒退，而“空”的性能则有了显著的改善。火狐比任何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缺陷和一些你无法解决的问题。:(