網站前端和背景性能優化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 标簽）。