提高瀏覽器渲染頁面速度的建議

怎樣儘可能的縮短瀏覽器上頁面渲染的時間，文章從以下幾方面着手：

寫出高效的css代碼

避免使用css表達式

把css文件放在頁面頂部

指定頁面圖片的尺寸

頁面頭部標明文檔編碼

一，寫出高效的css代碼

首先弄清瀏覽器解析html代碼的過程：構建一個dom樹，頁面要顯示的各元素都會創建到這個dom樹當中。每當一個新元素加入到這個dom樹當 中，瀏覽器便會通過css引擎查遍css樣式表，找到符合該元素的樣式規則應用到這個元素上。css引擎查找樣式表，對每條規則都按從右到左的順序去匹 配。

瞭解過程後，我們可以看出可以從兩方面優化我們的css代碼：1，定義的css樣式規則條數越少越好，所以趕緊刪除css文件中不必要的'樣式定 義;2，優化每條規則的選擇符書寫方式，儘量讓css引擎一看就知道這個規則是否需要應用到當前這個元素上，讓引擎少走不必要的彎路。

如以下幾種效率不高的css書寫方式：

body * {...}

hide-scrollbars * {...}

b, 用標籤做關鍵選擇符

ul li a {...}

#footer h3 {...}

* html #atticPromo ul li a {...}

c, 畫蛇添足的寫法

ul#top_blue_nav {...}

form#UserLogin {...}

d, 給非連接標籤添加 :hover 偽類，這會對用了strict doctype的頁面在IE7和IE8下變的很慢。

h3:hover {...}

:hover {...}

#foo:hover {...}

:hover {...}

優化建議：

a, 避免使用通配符;

b, 讓css引擎快速辨別該規則是否適用於當前元素：多用id或class選擇符，少用標籤選擇符;

c, 不要畫蛇添足把id和class或標籤和class等連着寫;

d, 儘量避免使用後代選擇符，去除不必要的祖先元素，可以考慮使用class選擇符來替換後代選擇符;

/*給無序和有序的li定義不同顏色，你可能會這樣寫：*/

ul li {color: blue;}

ol li {color: red;}

/*給li添加class，這樣定義效率會更高：*/

dered-list-item {color: blue;}

red-list-item {color: red;}

e, 避免給非連接標籤添加 :hover 偽類。

二，避免使用css表達式

css表達式僅在ie瀏覽器下才起作用，微軟已在ie8後不推薦使用，因為它會嚴重影響頁面性能：任何時候，不管任何一個事件被觸發，例如窗口的 resize 事件，鼠標的移動等等，css表達式都會重新計算一遍。

三，把css文件放在頁面頂部

把外聯或內聯樣式表放在body部分會影響頁面渲染的速度，因為瀏覽器只有在所有樣式表下載完成後才會繼續下載頁面其他內容。