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

Question

在客户Web应用程序上运行内存分析后，发现它们创建了很多DOM元素，然后保存在内存中以加快日后显示它们。

有人说：＆＃34;在内存中保留DOM元素比重绘它们便宜。＆＃34;

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

Answer 1

非常基本上，不管它们的实际用途是什么，这里......如果你在JS中更改on-DOM元素，那么在你的JS线程完成之后，每个修改过的元素（以及它们的任何子元素，如果回流已经移动了树的其他部分）重新粉刷。

绘画元素很昂贵 与运行功能相比，成本非常高 就像电子游戏一样，最昂贵的操作就是画在屏幕上。

重复和重新粉刷数十次，一个接一个地被击中（或者几个小点击加起来）。
在DOM之外将几十个更改一起批处理，并将它们附加到一个批量重排/重绘的HTML结果中。

这就是保存真实“成本”的地方 - 从DOM进行HTML修改，并附加或替换已存在的内容。
在内存上建立6页，当你登陆索引页面时，在可感知的延迟方面没有节省太多的东西，除了用于非DOM修改和批量绘制调用，并且大多数通过在需要时（在DOM之外）构建页面并在构建之后附加页面（只要您没有闲逛，等待开始构建时的异步数据）可以“及时”感受到节省的成本）。

你应该能够在Chrome的DevTools探查器中看到这个。

Answer 2

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

这是一个：http://jsperf.com/render-in-memory-vs-direct-dom-insertion/2

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