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

Question

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

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

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

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

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

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

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

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

谢谢

Answer 1

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

当你在最后添加时，重绘根本不会花费太多时间。在中间发生了重绘，因为现在偶数项和奇数项之类的东西现在被翻转了，需要重新应用 css。