javascript - 在内存中创建并显示或更改实时元素
问题描述
我正在重新订购<table>
.
我想知道它是否更快
1) 在内存中创建一个新的、重新排序的表,然后在 DOM 中替换旧表
2) 在活动 DOM 树上进行重新排序(更改行位置)?
我已经看到诸如下载图像之类的事情是在后台完成到一个虚拟元素的,该元素稍后将添加到 DOM 中。我知道这是为了减少 I/O 时间,并使页面更加负责。
在这种特定情况下,我想知道这样做是否有助于缩短处理时间?我的理由是,在每个重新订购步骤中,桌子都必须重新飞行。
我没有测试它,但是,我有理由在这里问它,因为整个问题可能从一开始就存在缺陷,这对于有 JS/HTML 经验的人来说可能是显而易见的。
解决方案
通常重新排列节点比替换它们便宜。但是有时差异可以忽略不计,因此不值得付出努力;重新渲染更简单。
如果只是对表格中的行进行排序,
- 我会创建一个数组
<tr>
- 对该数组进行排序
- 将它们添加到
document.createDocumentFragment()
- 然后将该片段(以及所有行一次)放到表中
避免多个渲染周期,因为它们比大多数 JS 代码更昂贵。
推荐阅读
- java - 自定义注释 | 不在二传手上工作
- c# - swagger asp..net core 3.1的隐式承载流
- c# - 记录跟踪级别记录到特定文件
- node.js - nodeJS async await 与 Google API
- nvidia - 为什么 fold@home 在 Ubuntu 上无法识别我的 Nvidia GPU?
- python - 如何在 Keras 中定义具有不同值的自定义损失?
- vue.js - 我可以在 Bootstrap-vue 表中删除带有 sr-only 类的 span 元素吗?
- c# - CosmosDb - 写入操作导致错误。错误=16500
- html - 强制 div 大小调整为 img
- python-3.x - 在python中的列表中添加1的边框