更多 DOM 个元素导致性能问题
More DOM elements creating performance issue
我们使用 asp.net mvc、javascript 和 jQuery（托管在本地机器上）创建了一个应用程序。基本设计是，当用户从一个页面导航到其他页面时，我们通过隐藏和显示 HTML 页面，将所有 HMTL 元素保留在 DOM 对象（浏览器）中而不是销毁。
我们的应用程序每天都在增长。早些时候我没有在我的项目中看到任何性能问题。但是现在，如果我将一页导航到另一页需要很长时间。今天我查看了我页面中的DOM个元素，超过了20,000。
问题：
Hiding/showing HTML 页面设计比破坏和重新创建更好？
DOM 从 javascript 操纵 20,000 个 DOM 对象，回流和重印对性能有何影响？
仅供参考，在撰写本文时，single-page HTML5 spec itself 有 109k DOM 个元素（甚至更多 DOM 个节点）。
Hide/Show the HTML pages is good design instead of destroying and re-created?
这在很大程度上取决于它是否必要（例如，因为重新创建删除的部分会很慢）and/or 可能（用户交互频繁导致隐藏部分再次显示）。
有几件事可以减慢您的速度
a) 垃圾回收。更多节点 = 垃圾收集器遍历的模式对象。原则上，现代垃圾收集器应该能够处理许多长期存在的对象，将它们塞入旧区域，然后不再被触及，但并非所有浏览器都具有最先进的 GC。
b) 回流events/dom queries/traversal 操作等
c) javascript 随文档大小缩放不佳的代码。一些 O(n²) 算法可能会渗透到复杂的应用程序中。回调触发进一步的回调等。
如果您不想砍伐 DOM 树，对于 a) 您无能为力。但是 b) 和 c) 可以通过几种方式进行优化：
- 从文档中分离子树并将它们保存在 javascript/document 片段中，这样任何遍历文档树的东西都不必处理它们
- 不要交织那些
- 读取布局状态（例如获取计算的 CSS 属性、边界矩形、偏移量等）
- 以任何方式写入 DOM 或触发事件
单独批量执行读取和写入以最大程度地减少回流次数
- 优化 javascript
中的热点
但这些只是一般准则。您应该对您的应用程序进行概要分析，以确定什么占用了 CPU 时间，无论您是被 GC、javascript 执行还是绘制事件所支配。
我们使用 asp.net mvc、javascript 和 jQuery（托管在本地机器上）创建了一个应用程序。基本设计是，当用户从一个页面导航到其他页面时，我们通过隐藏和显示 HTML 页面，将所有 HMTL 元素保留在 DOM 对象（浏览器）中而不是销毁。
我们的应用程序每天都在增长。早些时候我没有在我的项目中看到任何性能问题。但是现在，如果我将一页导航到另一页需要很长时间。今天我查看了我页面中的DOM个元素，超过了20,000。
问题：
Hiding/showing HTML 页面设计比破坏和重新创建更好？
DOM 从 javascript 操纵 20,000 个 DOM 对象，回流和重印对性能有何影响？
仅供参考，在撰写本文时，single-page HTML5 spec itself 有 109k DOM 个元素（甚至更多 DOM 个节点）。
Hide/Show the HTML pages is good design instead of destroying and re-created?
这在很大程度上取决于它是否必要（例如，因为重新创建删除的部分会很慢）and/or 可能（用户交互频繁导致隐藏部分再次显示）。
有几件事可以减慢您的速度
a) 垃圾回收。更多节点 = 垃圾收集器遍历的模式对象。原则上，现代垃圾收集器应该能够处理许多长期存在的对象，将它们塞入旧区域，然后不再被触及，但并非所有浏览器都具有最先进的 GC。
b) 回流events/dom queries/traversal 操作等
c) javascript 随文档大小缩放不佳的代码。一些 O(n²) 算法可能会渗透到复杂的应用程序中。回调触发进一步的回调等。
如果您不想砍伐 DOM 树，对于 a) 您无能为力。但是 b) 和 c) 可以通过几种方式进行优化：
- 从文档中分离子树并将它们保存在 javascript/document 片段中，这样任何遍历文档树的东西都不必处理它们
- 不要交织那些
- 读取布局状态（例如获取计算的 CSS 属性、边界矩形、偏移量等）
- 以任何方式写入 DOM 或触发事件
单独批量执行读取和写入以最大程度地减少回流次数
- 优化 javascript 中的热点
但这些只是一般准则。您应该对您的应用程序进行概要分析，以确定什么占用了 CPU 时间，无论您是被 GC、javascript 执行还是绘制事件所支配。