解读Yahoo!网站性能优化组定义的34条准则 - 减少DOM元素

减少DOM元素

页面越复杂就意味着需要下载更多的字节数，也意味着用JavaScript访问DOM也越慢。如果你需要循环一个含有500个DOM元素页面和一个含有5000个DOM元素的页面增加事件处理函数速度时完全不同的。

DOM元素的数量很大往往意味着我们需要做一些事情来改进了：页面美化要合理，没有必要的内容就移除掉。请自问：还在用嵌套的table来布局吗？还在用增加div方式来解决布局问题吗？其实也许有更语义化更好的方式你可以用来美化。

用YUI CSS实用工具：grids.css能帮你很好的解决布局问题，fonts.css和reset.css帮你去除浏览器默认的格式。接下来，你就可以重新开始构思你的页面，把div用在更语义化的地方，而不要仅仅为了产生新的行。

DOM元素的数量很容易测试，在Firebug的控制台中输入：document.getElementsByTagName('*').length。

究竟多少数量的DOM元素是多呢？比较做的好的各个站点：例如Yahoo！首页，内容翔实，美化不错，但是DOM数量仍然在700个一下。