|
二、我們從代碼方面來(lái)探討有如下方法
1.減少http請(qǐng)求數(shù)
圖片，css，script，flash，等等這些都會(huì)增加http請(qǐng)求數(shù)，減少這些元素的數(shù)量能減少響應(yīng)時(shí)間。
CSS Sprites技術(shù)能減少圖片的請(qǐng)求數(shù)，把零散的小圖片放到一起，運(yùn)用background-position來(lái)改變背景圖片的位置，前提是html元素事先定義好寬高，其實(shí)就像一個(gè)遮罩，移動(dòng)背景就會(huì)看到不同的景象。
內(nèi)嵌圖像 用data:URL scheme的方式把圖片內(nèi)容代碼直接嵌入html代碼中，這樣會(huì)增大html代碼的體積，改進(jìn)的方式是把內(nèi)嵌圖片嵌入到css中（css被緩存），這樣就會(huì)更好的減少http請(qǐng)求數(shù)而且不增大html的體積。
很多用戶都是在空緩存的情況下進(jìn)入你的網(wǎng)站的，這樣第一次的速度就會(huì)顯得很重要。
第一條規(guī)則是最重要的一條規(guī)則。
2.把樣式表放到頂部
我們發(fā)現(xiàn)把css放到文檔頭部會(huì)讓網(wǎng)頁(yè)加載得更快。因?yàn)檫@樣可以讓頁(yè)面逐漸加載。
把樣式表放到接近底部的問(wèn)題是它阻止了頁(yè)面元素的逐漸顯示。這樣還會(huì)導(dǎo)致“flash of unstyled content” 即在樣式表加載之前頁(yè)面內(nèi)容是以沒(méi)有樣式的形式顯示出來(lái)的，待加載完樣式后，頁(yè)面重繪，內(nèi)容一閃即改變了樣式表現(xiàn)。
3.把腳本放到底部
把腳本放到盡可能底部的地方，一個(gè)原因是讓頁(yè)面逐漸渲染，另一個(gè)是實(shí)現(xiàn)更好的并行下載。
對(duì)于腳本，腳本以下的內(nèi)容被阻止逐漸加載了，因?yàn)橹挥挟?dāng)下載完腳本以后才會(huì)下載下面的內(nèi)容，第二個(gè)腳本引起的問(wèn)題是阻止平行下載。 “http/1.1 specification”建議瀏覽器對(duì)一個(gè)域名， 同一時(shí)間下載數(shù)不超過(guò)2個(gè)（按：實(shí)際監(jiān)測(cè)發(fā)現(xiàn)一般有超過(guò)2個(gè)），我曾經(jīng)讓ie并行下載100個(gè)圖片。 當(dāng)腳本正在下載的時(shí)候，瀏覽器不會(huì)開(kāi)始下載任何東西。
4.避免css expressions
css expressions 是一個(gè)有力（和危險(xiǎn)）的方式動(dòng)態(tài)的改變css的屬性。他們自ie5就開(kāi)始被支持，舉個(gè)例子，用css expression可以讓背景色每個(gè)小時(shí)輪換一次。但是被非ie瀏覽器忽略的。
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” : “#F08A00″ );
expressions的問(wèn)題就在與它的計(jì)算頻率絕對(duì)超出我們的想象，甚至當(dāng)我們移動(dòng)鼠標(biāo)，都會(huì)引起頁(yè)面的重繪！
下面是舉例頁(yè)面
減少css expressions計(jì)算次數(shù)的一個(gè)方法就是使用一次性的expressions。 當(dāng)?shù)谝淮蝒xpression計(jì)算出一個(gè)明確的值，就讓樣式等于這個(gè)值，不再變動(dòng)。如果樣式的屬性一定要?jiǎng)討B(tài)的改變，就用時(shí)間句柄吧！
5.讓腳本和樣式外延
Javascript和CSS應(yīng)該是外部調(diào)用還是內(nèi)嵌呢？
用外部調(diào)用文件的方式更快，因?yàn)樗麄兪强梢员痪彺娴模绻莾?nèi)嵌在頁(yè)面中他們就無(wú)法被緩存了！想想如果用戶要在你的網(wǎng)站看很多很多的頁(yè)面，如果都是使用同一個(gè)外部腳本和樣式，那么他們一旦被緩存，就再也不需要下載了，這樣會(huì)給你帶來(lái)很大的潛在好處。
6.減小腳本體積
有兩個(gè)比較流行的工具是用來(lái)減小腳本的體積的–JSMin和YUI Compressor。（按：這個(gè)壓縮和Gzip壓縮是不一樣的，Gzip是傳輸壓縮，這個(gè)是代碼壓縮）。
我們以上方法，讀者應(yīng)該適當(dāng)?shù)倪x擇或配合使用，我們?cè)谶x擇方法的原則是應(yīng)該以最低的代價(jià)來(lái)完成客戶端的功能。
原文：http://hi.baidu.com/mj_623ok/blog/item/a843d8de288d601b632798b8.html
本文鏈接：http://www.95time.cn/tech/web/2009/6832.asp 
出處：Be Energetic,Be Confident!
責(zé)任編輯：bluehearts
上一頁(yè) WEB前端優(yōu)化的體會(huì) [2] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) WEB前端優(yōu)化的體會(huì) [3]
