DOM元素太多

Question

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

我的标记通常非常严格和高效,我怀疑我能够修剪得多.我倾向于使用大量的DOM元素来使样式完全正确并跨浏览器工作.

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

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

Answer 1

如果你通过Javascript在页面上进行大量的DOM和/或CSS操作,那么dom元素的数量只会进入图片.扫描具有50,000个元素的页面中的ID总是比仅有500个页面的页面慢.更改大部分页面继承的CSS样式很可能导致比更简单的页面更多重绘/回流页面等...

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

页面中的每个标记都会成为一个元素.如果您需要1200多个标记来表示"hello world",那么您就遇到了问题.这取决于内容. (4认同)
@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认同)