javascript - 在内存中创建并显示或更改实时元素

Question

我正在重新订购 <table> .

我想知道它是否更快

1) 在内存中创建一个新的、重新排序的表，然后替换 DOM 中的旧表

2) 在实时 DOM 树上重新排序(更改行位置)？

我已经看到像下载图像这样的事情是在后台完成的一个虚拟元素，稍后将被添加到 DOM 中。我理解这是为了减少 I/O 时间，并让页面更加负责。

在这种特定情况下，我想知道这样做是否有助于缩短处理时间？我的理由是，在每个重新订购步骤中， table 都必须重新装运。

我还没有测试它，但我有理由在这里问它，因为整个问题可能从一开始就存在缺陷，这对于对 JS/HTML 更有经验的人来说可能是显而易见的。

Answer 1

通常重新排列节点比替换它们更便宜。但有时差异可以忽略不计，因此不值得付出努力；重新渲染更简单。

如果只是对表格中的行进行排序，

• 我会创建一个 <tr> 的数组
• 对数组进行排序
• 将它们添加到 document.createDocumentFragment()
• 然后将该片段(同时所有行)放到表中

避免多次渲染循环，因为它们比大多数 JS 代码成本更高。