javascript - 更多 DOM 元素造成性能问题

Question

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

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

问题:

<小时/>

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

通过 JavaScript 对 20,000 个 DOM 对象进行 DOM 操作，在回流和重新打印方面对性能有何影响？

Answer 1

仅供引用，single-page HTML5 spec itself在撰写本文时，有 109k DOM 元素(甚至更多 DOM 节点)。

Hide/Show the HTML pages is good design instead of destroying and re-created?

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

有几件事会减慢你的速度

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

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

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

如果您不想减少 DOM 树，那么对于 a) 您无能为力。但是 b) 和 c) 可以通过多种方式进行优化:

• 从文档中分 ionic 树并将它们保存在 javascript/文档片段中，这样任何遍历文档树的内容都不必处理它们
• 不要将以下 Action 交错
  1. 读取布局状态(例如获取计算的 CSS 属性、边界矩形、偏移量等)
  2. 以任何方式写入 DOM 或触发事件
     
     单独批量执行读取和写入，以最大程度地减少回流次数
• 优化 JavaScript 中的热点

但这些只是一般准则。您应该分析您的应用程序，找出哪些因素正在消耗 CPU 时间，无论您是由 GC、JavaScript 执行还是绘制事件主导。