HTML5 性能 - 将 <tr> 添加到表格中间与表格末尾

Posted 2023-02-22

【中文标题】HTML5 性能 - 将 <tr> 添加到表格中间与表格末尾

【英文标题】：HTML5 Performance - Add a <tr> to the middle of a table vs. end of table

【发布时间】：2016-05-07 16:10:43

【问题描述】：

我有一个大表格元素，大约有 2000 个<tr>，每个大约有 20 个<td>

当尝试将新的<tr> 添加到表中时，如果通过.appendChild() 添加到末尾，元素会很快添加到 DOM。

当尝试将新的<tr> 添加到表用户.insertBefore() 的中间时，会触发巨大的样式重新计算，可能高达 1000 毫秒，这当然是一个糟糕的用户体验。

参见 JSBin： http://jsbin.com/bonumezede/edit?html,js,output

附上 Chrome DevTools Timeline 的屏幕截图。将三行添加到顶部，然后添加三行到中间，最后添加三行到表的末尾。如您所见，添加到末尾要快得多。

我知道表格可能很慢，但我正在维护现有产品，无法更改标记。

基本上，我的两个问题是：

为什么添加到表格底部更快（可能是因为 不必移动现有行？） 如何优化我的表格以更好地处理添加到顶部/中间的行？

谢谢

【问题讨论】：

为尽可能多的列提供固定宽度以减少回流。行上的最大高度可以帮助。基本上，尝试消除尽可能多的数学来填充表格行。有时，在插入时隐藏表格然后取消隐藏会有所帮助，但在过去几年中，随着浏览器变得越来越复杂，这种技巧已经失去了一些动力。

你能把表格分成多个单独的表格吗？我想这将有助于提高性能，而且很可能有助于提高可读性。现在代码会更复杂，我猜它属于标记更改类别

Aaron 建议的一个更简单的版本是只显示表格的一小部分，不管怎样，这个部分在屏幕上都是可见的。当用户滚动表格时，相应地更改可见部分。

你试过table-layout: fixed;吗？

是的，我有，并没有真正改变性能

【参考方案1】：

在最后插入时，会分配新空间并快速分配。当您在中间插入时，会在末尾创建一个新行，然后所有元素向右移动 1。

当您在最后添加时，重绘根本不需要太多时间。在中间发生了重绘，因为现在偶数和奇数的项目现在被翻转，并且需要重新应用 css。