网站访问优化之-内容篇-减少DOM元素的数量

减少DOM元素的数量

复杂的页面意味着需要下载更多的字节,这也意味着JavaScript中的DOM访问速度较慢。当你想要添加一个事件处理程序时,如果在页面上循环500或5000个DOM元素,这是有区别的。

大量的DOM元素可能是一个症状,应该通过页面的标记来改进,而不必删除内容。你是否使用嵌套表进行布局?你只是抛出更多<div>的东西来解决布局问题?也许有一个更好,更正确的方法来做你的标记。

对于布局的帮助很大的是YUI CSS工具:grids.css可以帮助您完成整体布局,fonts.css和reset.css可以帮助您剥离浏览器的默认格式。这是一个重新开始并考虑标记的机会,例如<div>只有在语义上有意义时才使用s,而不是因为它会呈现新行。

DOM元素的数量很容易测试,只需输入Firebug的控制台:
document.getElementsByTagName(‘*’).length

多少DOM元素太多?检查其他具有良好标记的类似页面。例如,Yahoo!主页是一个非常繁忙的页面,仍然低于700 elements (HTML tags).