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

Question

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

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

Chrome 83

• 追加单个:90 毫秒
• 附加多个:12,000 毫秒
• 空:100 毫秒

Chrome 81

• 追加单个:90 毫秒
• 附加多个:6,000 毫秒
• 空:7,000 毫秒

火狐 68

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

Safari 13

• 追加单个:30 毫秒
• 附加多个:40 毫秒
• 清空:5 毫秒

由此看来，从 Chrome 81 -> Chrome 83 开始，“append multi”的性能明显下降，而“empty”的性能显着提高。 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 的“性能”选项卡对其进行了检查，它显示了一个非常大的 Cumulative Layout Shift。 .虽然这本身不是问题，但这确实意味着 Chrome 出于某种原因将其视为某种布局更改。

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

该问题很可能是 Chrome 错误和您无法解决的问题。 :(