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

Posted 2023-02-16

【中文标题】追加和清空大型列表时的性能

【英文标题】：performance when appending to and emptying large lists

【发布时间】：2020-06-11 21:34:47

【问题描述】：

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

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

Chrome 83

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

Chrome 81

追加单曲：90ms 追加多点：6,000 毫秒 空：7,000 毫秒

Firefox 68

追加单个：34ms 追加多：35ms 空：7,000 毫秒

Safari 13

追加单曲：30ms 追加多：40ms 空：5ms

由此看来，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

【问题讨论】：

在丑陋的“A11Y”""redesign"" 充满缺陷和基本坏掉之后选择下拉菜单。例如，在打开后悬停一个选择框，确保立即用鼠标退出悬停选项。开始滚动页面。选项下拉菜单将在页面上神奇地保持打开状态......难怪看到这个（准备得非常好）问题。等不及 2045 终于看到 Native ActionElement API

好吧，至少他们让排空更快了！ :-) 从来没想过我会这么说，但是......太糟糕了，它们不能都像 Safari 一样好！

对于现在发现此问题的任何人：从 Chrome 89 开始（至少），我找到了一个实用的解决方法。在修改前将选择列表的“大小”属性设置为 1，然后再将修改时间从 6-8 秒/25k 记录降低到 250 毫秒。

【参考方案1】：

这是一个有趣的问题。我打开了你的 sn-p 并使用 Chrome DevTools 的性能选项卡检查了它，它显示了一个非常大的 Cumulative Layout Shift。虽然这本身不是问题，但这确实意味着 Chrome 出于某种原因将其限定为某种布局更改。

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

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

【讨论】：

之前通过 chrome bug tracker 报告过。感谢您提供更多信息；我使用过开发工具，但不是它们的专家，也没有看到您在此处指出的信息。有趣！