网站前端和后台性能优化19

减小DOM元素的数量 (Reduce the Number of DOM Elements)

tag:content

复杂的页面意味着更多的字节需要被下载而且也意味着在JavaScript中遍历DOM更慢。比如你在页面中添加一个事件,让它在500或者 5000个DOM元素中循环,它们的效率是不同的。

更多的DOM元素表明有些标签需要被改良而并不一定需要移除实际内容。你是否为了布局而使用繁琐

的网一样的表格?你是否只是为了弥补一些布局的问题而使用了更多的div标签?也许还有更好和更符合语义的标签可以使用。

YUI CSS utilities可以很好的帮助进行布局:grid.css 可以帮助你进行所有的布局,front.css 和 reset.css 可以帮助你去除浏览器默认的格式。这是你开始重新审视你的标签的机会,比如只在语义符合时使用div标签,而不是用它来另起一行。

DOM 元素的数量很好检测,只要在Firebug的控制台里输入:

document.getElementsByTagName_r('*').length

那么多少DOM元素算多呢?查看下类似的使用较好的标签的页面。比如Yahoo! Home Page是一个很丰富的页面但只有700以下的DOM元素(HTML 标签)。

上一篇:MyBatis持久层框架使用总结


下一篇:vuex:页面通信的终极武器