更多 DOM 元素造成性能问题答案

【问题标题】：More DOM elements creating performance issue更多 DOM 元素造成性能问题
【发布时间】：2015-03-26 09:37:56
【问题描述】：

我们使用 asp.net mvc、javascript 和 jQuery（托管在本地机器上）创建了一个应用程序。基本设计是，我们将所有 HMTL 元素保留在 DOM 对象（浏览器）中，而不是销毁，方法是在用户从一个页面导航到其他页面时隐藏和显示 HTML 页面。

我们的应用程序每天都在增长。早些时候，我在我的项目中没有看到任何性能问题。但是现在，如果我将一个页面导航到另一个页面需要很长时间。今天检查了我页面中的DOM元素，超过了20000个。

问题：

隐藏/显示 HTML 页面是比破坏和重新创建更好的设计吗？

使用 20,000 个 DOM 对象从 javascript 进行 DOM 操作，在回流和重印方面对性能有什么影响？

【问题讨论】：

DOM 操作很昂贵。如果您使用 jQuery 构建/销毁大约 20,000 个元素，那么您做错了。
我在单个页面中可以维护的 DOM 对象的最大限制是多少？我读到的某个地方是 700 到 1000。
我建议您对元素进行 AJAX 分页。这是一种两全其美的妥协。您的调用速度比页面加载速度快，但不如隐藏和显示快（除非页面上有 20,000 个元素）
假设我们有 4 个标签，每个标签我正在加载一页。如果用户将一个页面移动到另一个页面，我们将隐藏 div 而不是销毁。我知道这是错误的实施方式。但我是团队的新手，在向我的技术专家解释之前，我需要更多关于回流的信息，以及如果 DOM 有更多元素，回流的影响是什么。

【解决方案1】：

仅供参考，在撰写本文时，single-page HTML5 spec itself 有 109k DOM 元素（甚至更多 DOM 节点）。

隐藏/显示 HTML 页面是好的设计，而不是破坏和重新创建？

这在很大程度上取决于它是否必要（例如，因为重新创建已删除的部分会很慢）和/或可能（用户交互经常导致隐藏部分再次显示）。

有几件事会减慢你的速度

a) 垃圾收集。更多节点 = 垃圾收集器要遍历的模式对象。原则上，现代垃圾收集器应该能够处理许多长期存在的对象，方法是将它们填充到旧区域中，然后不再被触及，但并非所有浏览器都具有最先进的 GC。

b) 回流事件/dom 查询/遍历操作等

c) 无法随文档大小缩放的 JavaScript 代码。一些 O(n²) 算法可能会渗透到复杂的应用程序中。回调触发进一步的回调等等。

如果你不想削减你的 DOM 树，你可以做的事情不多。但是 b) 和 c) 可以通过多种方式进行优化：

从文档中分离子树并将它们保存在 javascript/文档片段中，这样任何遍历文档树的东西都不必处理它们
不要交错操作
1. 读取布局状态（例如获取计算的 CSS 属性、边界矩形、偏移量等）
2. 以任何方式写入 DOM 或触发事件
  
  分别批量执行读取和写入，以尽量减少回流次数
优化 javascript 中的热点

但这些只是一般准则。您应该分析您的应用程序以找出占用 CPU 时间的原因，无论您是被 GC、javascript 执行还是绘制事件控制。

【讨论】：

仅供参考，单页 HTML5 规范本身有 109k DOM 元素。 是的，我同意。但如果你看一下页面，它没有任何 java 脚本操作。基本上这是静态页面。在我的情况下有所不同，以股票市场等繁忙网站为例。