HTML5性能 - 在表格中间添加一个表格

Question

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

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

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

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

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

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

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

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

由于

Answer 1

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

当你在最后添加时，重绘不会花费很多时间。在中间重绘是因为现在像偶数和奇数的项目现在被翻转，并且需要重新应用css。