更多的 DOM 元素会产生性能问题

More DOM elements creating performance issue

本文关键字：性能 问题 元素 DOM      更新时间：2023-09-26

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

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

问题：

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

来自 JavaScript 的 DOM 操作，具有 20,000 个 DOM 对象，性能在重排和重印方面有什么影响？

仅供参考，在撰写本文时，单页HTML5规范本身有109k DOM元素（甚至更多的DOM节点）。

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

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

有几件事会减慢你的速度

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

b） 重排事件/DOM 查询/遍历操作等。

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

关于a）如果你不想砍掉你的DOM树，你无能为力。但是 b） 和 c） 可以通过多种方式进行优化：

  • 从文档中分离子树并将它们保存在JavaScript/文档片段中，这样遍历文档树的任何内容都不必处理它们
  • 不要交错操作：
    1. 读取布局状态（例如获取计算的 CSS 属性、边框、偏移量等）
    2. 以任何方式写入 DOM 或触发事件

      批量分别执行读取和写入，以最大程度地减少重排次数
  • 优化JavaScript中的热点

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

相关文章：