- 相關(guān)推薦
提高瀏覽器渲染頁(yè)面速度的建議
怎樣盡可能的縮短瀏覽器上頁(yè)面渲染的時(shí)間，文章從以下幾方面著(zhù)手：
寫(xiě)出高效的css代碼
避免使用css表達式
把css文件放在頁(yè)面頂部
指定頁(yè)面圖片的尺寸
頁(yè)面頭部標明文檔編碼
一，寫(xiě)出高效的css代碼
首先弄清瀏覽器解析html代碼的過(guò)程：構建一個(gè)dom樹(shù)，頁(yè)面要顯示的各元素都會(huì )創(chuàng )建到這個(gè)dom樹(shù)當中。每當一個(gè)新元素加入到這個(gè)dom樹(shù)當 中，瀏覽器便會(huì )通過(guò)css引擎查遍css樣式表，找到符合該元素的樣式規則應用到這個(gè)元素上。css引擎查找樣式表，對每條規則都按從右到左的順序去匹 配。
了解過(guò)程后，我們可以看出可以從兩方面優(yōu)化我們的css代碼：1，定義的css樣式規則條數越少越好，所以趕緊刪除css文件中不必要的樣式定 義;2，優(yōu)化每條規則的選擇符書(shū)寫(xiě)方式，盡量讓css引擎一看就知道這個(gè)規則是否需要應用到當前這個(gè)元素上，讓引擎少走不必要的彎路。
如以下幾種效率不高的css書(shū)寫(xiě)方式：
body * {...}
hide-scrollbars * {...}
b, 用標簽做關(guān)鍵選擇符
ul li a {...}
#footer h3 {...}
* html #atticPromo ul li a {...}
c, 畫(huà)蛇添足的寫(xiě)法
ul#top_blue_nav {...}
form#UserLogin {...}
d, 給非連接標簽添加 :hover 偽類(lèi)，這會(huì )對用了strict doctype的頁(yè)面在IE7和IE8下變的很慢。
h3:hover {...}
.foo:hover {...}
#foo:hover {...}
div.faa :hover {...}
優(yōu)化建議：
a, 避免使用通配符;
b, 讓css引擎快速辨別該規則是否適用于當前元素：多用id或class選擇符，少用標簽選擇符;
c, 不要畫(huà)蛇添足把id和class或標簽和class等連著(zhù)寫(xiě);
d, 盡量避免使用后代選擇符，去除不必要的祖先元素，可以考慮使用class選擇符來(lái)替換后代選擇符;
/*給無(wú)序和有序的li定義不同顏色，你可能會(huì )這樣寫(xiě)：*/
ul li {color: blue;}
ol li {color: red;}
/*給li添加class，這樣定義效率會(huì )更高：*/
.unordered-list-item {color: blue;}
.ordered-list-item {color: red;}
e, 避免給非連接標簽添加 :hover 偽類(lèi)。
二，避免使用css表達式
css表達式僅在ie瀏覽器下才起作用，微軟已在ie8后不推薦使用，因為它會(huì )嚴重影響頁(yè)面性能：任何時(shí)候，不管任何一個(gè)事件被觸發(fā)，例如窗口的 resize 事件，鼠標的移動(dòng)等等，css表達式都會(huì )重新計算一遍。
三，把css文件放在頁(yè)面頂部
把外聯(lián)或內聯(lián)樣式表放在body部分會(huì )影響頁(yè)面渲染的速度，因為瀏覽器只有在所有樣式表下載完成后才會(huì )繼續下載頁(yè)面其他內容。
【提高瀏覽器渲染頁(yè)面速度的建議】相關(guān)文章：
如何提高電腦傳輸速度10-27
有效提高跳繩速度的方法07-11
諾基亞5230提高運行速度的技巧07-12
在電腦上提高英語(yǔ)行測的速度的方法07-12
諾基亞E63--教大家提升UC瀏覽器上網(wǎng)速度07-12
3D智能渲染管理系統全面提高設計師效率！07-11
寫(xiě)作中渲染的技巧02-17
網(wǎng)頁(yè)設計實(shí)習生提高設計速度工作效率的方法07-10
頁(yè)面設計崗位職責12-26