太多的 DOM 元素

Too Many DOM Elements

本文关键字：元素 DOM 太多更新时间：2023-09-26

我正在构建一个单页网络应用程序，它开始变得非常大。该应用程序有几个组件，每个组件都经过精心设计。平均而言，该应用程序的 DOM 元素计数为 1200+。我的 YSlow 扫描警告我，这太多了，我不应该超过 700 个 DOM 元素。

我

通常对我的标记非常严格和高效，我怀疑我是否能够修剪很多。我倾向于使用很多 DOM 元素来获得完全正确的样式并跨浏览器工作。

如何大幅减少 DOM 元素的数量？我是否必须按需加载更多内容（ajax）而不是在页面加载时加载所有内容？大量的 DOM 元素对性能有很大的影响吗？

我很想听听人们对此的体验以及您可能拥有的任何解决方案......

只有当你通过Javascript在页面上做大量的DOM和/或CSS操作时，dom元素的数量才会进入图片。在包含 50,000 个元素的页面中扫描 ID 总是比只有 500 个元素的页面慢。更改大多数页面继承的 CSS 样式很可能会导致比在更简单的页面上更多的重绘/重排，等等......

减少元素数量的唯一方法是简化页面。

我们构建了一个单页 Web 应用。最初 Yslow 让我担心，因为我们在页面中有 2,000+ 个 DOM 对象。

经过一些工作，我们将所有其他Yslow项目都变成了绿色。我们最终接受了它（现在大约 1,800 个），因为该应用程序在各种浏览器中都非常快。

但我们不支持 IE6 和 IE7，这些浏览器可能会有所不同。

如何大幅减少 DOM 元素的数量？

仅使用那些必需的元素。如果你想要一个更详细的建议，发布你的代码。

我是否必须按需加载更多内容（ajax）而不是在页面加载时加载所有内容？

如果您希望页面在启动时表现更好，则可以这样做。

大量的 DOM 元素对性能有很大的影响吗？

不一定。

您可以在用户单击按钮时按需渲染元素，也可以使用延迟加载，如 Twitter。