过多的 DOM 元素答案

【问题标题】：Too Many DOM Elements过多的 DOM 元素
【发布时间】：2011-08-26 17:10:27
【问题描述】：

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

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

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

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

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

那么计数 1200+ 是不是很正常？我确定我注意到最近一周 Chrome 开发工具的速度变慢了……
页面中的每个标签都成为一个元素。如果您需要 1200 多个标签来表示“hello world”，那么您就有问题了。这取决于内容。
@MarcB - <div id="aA"></div><script>var hw = [ 'h','e','l','l','o',' ','w','o','r','l','d' ];for(var i = 1;i < 1200; i++){ var a = document.createElement("span"); if(i % 100 == 0) a.innerHTML = hw[(i/100)-1];document.getElementById("aA").appendChild(a);}</script>

【解决方案2】：

我们已经构建了一个单页网络应用程序。最初 Yslow 让我担心，因为我们在页面中有 2,000 多个 DOM 对象。

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

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

【讨论】：

【解决方案3】：

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

只使用那些必要的元素。如果您需要更详细的建议，请发布您的代码。

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

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

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

不一定。

【讨论】：

【解决方案4】：

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

【讨论】：