Javascript 重画DOM元素或将它们保留在内存中更便宜吗？

在客户的web应用程序上运行内存分析后，发现他们的许多DOM元素都是创建的，然后保存在内存中，以加快以后的显示速度

据说：“在内存中保留DOM元素比重画它们便宜。”

---

我一直在努力寻找支持或反对这一论点的文献

如果您查看jsperf.com，您会发现数百个真实世界的测试，它们演示了HTML操作的内存与DOM方法

这里有一个：

---

大多数DOM更改都需要文档回流或重新绘制整个页面，以便重新计算所有内容的位置。当您在内存中（DOM之外）执行此操作时，不会发生这种情况。因此，内存中的操作总是更快。

基本上，不管它们的实际用途是什么，这里。。。如果在JS中更改DOM元素，那么在JS线程完成后，将重新绘制这些修改的元素中的每一个（以及它们的任何子元素，如果回流移动了树的其他部分）

绘画元素是昂贵的。
与运行函数相比，成本非常高。
就像电子游戏一样，最昂贵的操作是将屏幕拉近

回流焊和重新喷漆几十次，一次接一次是一个巨大的打击（或几个小打击加起来）。
从DOM中将几十个更改批处理在一起，并将它们附加到HTML中，结果是一次批处理的回流/重新绘制

这才是真正节省“成本”的地方——对DOM进行HTML修改，并附加或替换已有的内容。
在内存中构建6个页面，当您在索引页面上着陆时，除了脱离DOM修改和批处理绘制调用之外，并没有节省多少可感知的延迟，而大部分节省可以通过在需要时构建页面（脱离DOM）并在构建后追加页面来“及时”感受到（只要您不闲逛，在开始构建时等待异步数据）

---

你应该可以在Chrome的DevTools profiler中清楚地看到这一点。

你的意思是客户说的？这与重画有什么关系？如果你将它们保存在内存中，你得到的唯一好处是你不需要在以后重新创建它们。它们仍然需要在屏幕上呈现。我不认为这是问题所在OP要求。此外，jsperf测试结果不一定与生产使用相关，而且许多测试都存在缺陷（例如，链接到的测试不会从页面中删除节点，这使得比较毫无用处）。