首页 > 解决方案 > 在内存中创建并显示或更改实时元素

问题描述

我正在重新订购<table>.

我想知道它是否更快

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

2) 在活动 DOM 树上进行重新排序(更改行位置)?

我已经看到诸如下载图像之类的事情是在后台完成到一个虚拟元素的,该元素稍后将添加到 DOM 中。我知道这是为了减少 I/O 时间,并使页面更加负责。

在这种特定情况下,我想知道这样做是否有助于缩短处理时间?我的理由是,在每个重新订购步骤中,桌子都必须重新飞行。

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

标签: javascripthtml

解决方案


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

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

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

避免多个渲染周期,因为它们比大多数 JS 代码更昂贵。


推荐阅读