我正在开发一个单页应用程序，它使用来自 jqWidgets 库的大量小部件(主要是网格和选项卡)，这些小部件都是在页面加载时加载的。它变得相当大，我在使用后开始注意到(我强调使用是因为它在简单地打开任意时间后都不会开始滞后，但具体来说，在打开和关闭我页面上的一堆选项卡，每个选项卡都包含多个通过 Ajax 加载的网格，每个网格都有多个事件监听器)网站几分钟后 UI 变得非常慢，有时没有响应，当页面刷新时，一切又恢复正常几分钟然后回到滞后状态。我仍在本地主机上进行测试。我最初的 react 是 DOM 元素太多(每个网格创建数百个 div!我有很多)所以绑定(bind)到 ID 的事件监听器必须搜索太多元素并变得缓慢。如果是这种情况，修复起来并不难，我的假设可能是罪魁祸首还是我有更糟糕的事情要担心？
更新:这里是内存时间线和堆快照的捕获。在内存时间轴上，没有与网站进行交互，两次大幅增加是页面刷新，中间的锯齿部分只是让我的网站闲置。
最佳答案
虽然没有看到任何代码示例，但听起来还不错。
如果您有很多 jQuery 选择器，请尝试使它们尽可能具体。特别是如果您经常选择很多项目。
例如，如果您有一堆类“abc”，请尝试在其之前指定要查找的位置 - 例如它们只存在于表格单元格中吗？它们只能在段落标签中找到吗？您使选择器越具体越好，就像您这样指定选择器一样:
$('.class')
然后它将在整个 DOM 中搜索与 .class 匹配的任何内容，但是，如果您按如下方式指定它:$('p .class') 那么它将只搜索类的所有段落标签。
其他性能 killer 正在连接事件，然后从不删除它们。如果您有任何代码可以删除附加了事件处理程序的元素，那么最佳做法是在删除元素时删除事件处理程序。否则，您将开始堆积孤立的事件。
如果你正在做一个大型的单页应用程序，看看像 backbone ( http://backbonejs.org/ ) 或 angular ( http://angularjs.org/ ) 这样的库，看看这是否能帮助你——它们缓解了很多使用 plain 的人所面临的问题jQuery 将运行到。
最后，这篇文章 ( http://coding.smashingmagazine.com/2012/11/05/writing-fast-memory-efficient-javascript/) 非常擅长概述您可以编写快速、高效的 javascript 以及如何避免常见的性能陷阱。
希望这对您有所帮助。
关于javascript - 单页应用程序 - 大型 DOM - 慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18907584/