HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创


Home » Frontend » Performance » 前端性能优化:Reduce the Number of DOM Elements

前端性能优化:Reduce the Number of DOM Elements

今天要介绍的YSlow前端性能优化规则是:Reduce the Number of DOM Elements(减少页面中DOM节点的数量)。

DOM Elements 过多带来的问题

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example.

页面中DOM Elements过多,意味着页面结构就越复杂,自然HTML的代码量就会加大,页面下载的速度就越慢。而浏览器解析复杂页面的解析时间也就需要越久。JavaScript编程中,要处理复杂的DOM结构也就越困难。YSlow 给出的例子是给500或者5000个DOM对象绑定处理事件(当然,如果你比较熟练,你也许会使用Event Delegate来处理,优化JavaScript代码的性能)。

但是很不幸,就像我在《杂谈:Make fewer HTTP requests 想起的一些事情》提到的,国内大多数的大型网站的首页,很多都是“又臭又长”,there are thousands of DOM Elements on the homepage。

当页面中还有太多的 DOM Elements时,我们就应该像YSlow文档中提到的那样思考:

A high number of DOM elements can be a symptom that there’s something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there’s a better and more semantically correct way to do your markup.

页面的代码是否合理,时候需要优化HTML代码。页面中时候含有可以移除的内容?页面中是否嵌套了过多的DIV标签?是不是就应为需要换行,就都多嵌套了一层DIV标签?这时候,我们需要认真思考一下,时候有更好的布局方式,或者可以利用一些CSS的布局定位技巧来避免这些不必要的DOM Elements。

当然,YSlow文档也推荐了YAHOO开发的 YUI CSS utilities框架,帮助我们可以利用更规范合理的布局来避免页面中 DOM Elements 过多的问题。CSS 框架其实有很多:

框架只能作为我们开发时的工具,置于页面中需要放置的内容,或者究竟是不是需要像现在这样多就是我们需进一步做用户研究分析。最后推荐给用户感兴趣的内容,去掉那些用户不关心的内容,避免过多的 DOM Elements。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Reduce the Number of DOM Elements

« »


电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)