【发布时间】：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;吗？ -
是的，我有，并没有真正改变性能
标签： javascript html performance dom