1、法則1. 減少http 請(qǐng)求次數(shù)80% 的最終用戶響應(yīng)時(shí)間花在前端程序上，而其大部分時(shí)間則花在各種頁面元素，如圖像、樣式表、腳本和flash 等，的下載上。減少頁面元素將會(huì)減少http 請(qǐng)求次數(shù)。這是快速顯示頁面的關(guān)鍵所在。一種減少頁面元素個(gè)數(shù)的方法是簡(jiǎn)化頁面設(shè)計(jì)。但是否存在其他方式， 能做到既有豐富內(nèi)容， 又能獲得快速響應(yīng)時(shí)間呢？以下是這樣一些技術(shù)：image maps 組合多個(gè)圖片到一張圖片中。總文件大小變化不大，但減少了http 請(qǐng)求次數(shù)從而加快了頁面顯示速度。該方式只適合圖片連續(xù)的情況；同時(shí)坐標(biāo)的定義是煩人又容易出錯(cuò)的工作。css sprites 是更好的方法。它可以組合頁面中的圖片到

2、單個(gè)文件中，并使用css 的 background-image 和 background-position 屬性來現(xiàn)實(shí)所需的部分圖片。inline images 使用data: url scheme 來在頁面中內(nèi)嵌圖片。這將增大html 文 件的大小。組合inline images 到你的（緩存）樣式表是既能較少http 請(qǐng)求，又能避免加大html 文件大小的方法。combined files 通過組合多個(gè)腳本文件到單一文件來減少 http 請(qǐng)求次數(shù)。樣式表也可采用類似方法處理。這個(gè)方法雖然簡(jiǎn)單，但沒有得到大規(guī)模的使用。大 10 美國(guó)網(wǎng)站每頁平均有7 個(gè)腳本文件和2 個(gè)樣式表。 當(dāng)頁面之間腳本

3、和樣式表變化很大時(shí)，該方式將遇到很大的挑戰(zhàn)，但如果做到的話， 將能加快響應(yīng)時(shí)間。減少 http 請(qǐng)求次數(shù)是性能優(yōu)化的起點(diǎn)。這最提高首次訪問的效率起到很重要的作用。tenni theurer 的文章browser cache usage exposed!描述， 40-60% 據(jù) 的日常訪問是首次訪問，因此為首次訪問者加快頁面訪問速度是用戶體驗(yàn)的關(guān)鍵。法則2. 使用cdn(content delivery network, 內(nèi)容分發(fā)網(wǎng)絡(luò))用戶離web server 的遠(yuǎn)近對(duì)響應(yīng)時(shí)間也有很大影響。從用戶角度看， 把內(nèi)容部署到多個(gè)地理位置分散的服務(wù)器上將有效提高頁面裝載速度。但是該從哪里開始呢？作為實(shí)

4、現(xiàn)內(nèi)容地理分布的第一步，不要試圖重構(gòu)web 應(yīng)用以適應(yīng)分布架構(gòu)。改變架構(gòu)將導(dǎo)致多個(gè)周期性任務(wù)，如同步session 狀態(tài)，在多個(gè)server 之間復(fù)制數(shù)據(jù)庫交易。這樣縮短用戶與內(nèi)容距離的嘗試可能被應(yīng)用架構(gòu)改版所延遲，或阻止。我們還記得80-90%的最終用戶響應(yīng)時(shí)間花在下載頁面中的各種元素上，如圖像文件、 樣式表、 腳本和flash 等。與其花在重構(gòu)系統(tǒng)這個(gè)困難的任務(wù)上，還不如先分布靜態(tài)內(nèi)容。這不僅能大大減少響應(yīng)時(shí)間， 而且由于cdn 的存在， 分布靜態(tài)內(nèi)容非常容易實(shí)現(xiàn)。cdn 是地理上分布的web server 的集合， 用于更高效地發(fā)布內(nèi)容。通常基于網(wǎng)絡(luò)遠(yuǎn)近來選擇給具體用戶服務(wù)的 web s

5、erver。 一些大型網(wǎng)站擁有自己的cdn ，但是使用如akamai technologies, mirror image internet, 或 limelight networks 等 cdn 服務(wù)提供商的服務(wù)將是劃算的。 在 yahoo! 把靜態(tài)內(nèi)容分布到cdn 減少了用戶影響時(shí)間20% 或更多。切換到cdn 的 代碼修改工作是很容易的，但能達(dá)到提高網(wǎng)站的速度。法則3. 增加expires header網(wǎng)頁內(nèi)容正變得越來越豐富，這意味著更多的腳本文件、樣式表、圖像文件和flash 。 首次訪問者將不得不面臨多次http 請(qǐng)求，但通過使用expires header， 您可以在客戶端緩存這

6、些元素。這在后續(xù)訪問中避免了不必要的http 請(qǐng)求。expires header 最常用于圖像文件，但是它也應(yīng)該用于腳本文件、樣式表和flash 。 瀏覽器（和代理）使用緩存來減少http 請(qǐng)求的次數(shù)和大小，使得網(wǎng)頁加速裝載。web server 通過expires header 告訴客戶端一個(gè)元素可以緩存的時(shí)間長(zhǎng)度。如果服務(wù)器是apache 的話，您可以使用expiresdefault 基于當(dāng)期日期來設(shè)置過期日期，如：expiresdefault “access plus 10 years” 設(shè)置過期時(shí)間為從請(qǐng)求時(shí)間開始計(jì)算的10 年。 請(qǐng)記住， 如果使用超長(zhǎng)的過期時(shí)間，則當(dāng)內(nèi)容改變時(shí)，您必

7、須修改文件名稱。在 yahoo! 我們經(jīng)常把改名作為release 的一個(gè)步驟：版本號(hào)內(nèi)嵌在文件名中，如yahoo_2.0.6.js。法則4. 壓縮頁面元素通過壓縮http 響應(yīng)內(nèi)容可減少頁面響應(yīng)時(shí)間。從http/1.1 開始， web 客戶端在http 請(qǐng)求中通過accept-encoding 頭來表明支持的壓縮類型，如：accept-encoding: gzip, deflate. 如果web server 檢查到accept-encoding 頭，它會(huì)使用客戶端支持的方法來壓縮 http 響應(yīng)，會(huì)設(shè)置content-encoding 頭，如：content-encoding: gzip。

8、 gzip 是目前最流行及有效的壓縮方法。其他的方式如deflate，但它效果較差，也不夠流行。通過gzip ，內(nèi)容一般可減少70% 。如果是apache ，在1.3 版本下需使用mod_gzip 模塊，而在2.x 版本下，則需使用mod_deflate。 web server 根據(jù)文件類型來決定是否壓縮。大部分網(wǎng)站對(duì)html 文件進(jìn)行壓縮。但 對(duì)腳本文件和樣式表進(jìn)行壓縮也是值得的。實(shí)際上，對(duì)包括xml 和json 在內(nèi)的任務(wù)文本信息進(jìn)行壓縮都是值得的。圖像文件和pdf 文件不應(yīng)該被壓縮，因?yàn)樗鼈儽緛砭褪菈嚎s格式保存的。對(duì)它們進(jìn)行壓縮， 不但浪費(fèi)cpu， 而且還可能增加文件的大小。因此，對(duì)盡量

9、多的文件類型進(jìn)行壓縮是一種減少頁面大小和提高用戶體驗(yàn)的簡(jiǎn)便方法。法則5. 把樣式表放在頭上我們發(fā)現(xiàn)把樣式表移到head 部分可以提高界面加載速度，因此這使得頁面元素可以順序顯示。在很多瀏覽器下，如 ie ，把樣式表放在document 的底部的問題在于它禁止了網(wǎng) 頁內(nèi)容的順序顯示。瀏覽器阻止顯示以免重畫頁面元素，那用戶只能看到空白頁了。firefox 不會(huì)阻止顯示，但這意味著當(dāng)樣式表下載后，有些頁面元素可能需要重畫，這導(dǎo)致閃爍問題。html 規(guī)范明確要求樣式表被定義在head 中，因此，為避免空白屏幕或閃爍問題，最好的辦法是遵循h(huán)tml 規(guī)范，把樣式表放在head 中。法則6. 把腳本文件放在

10、底部與樣式文件一樣，我們需要注意腳本文件的位置。我們需盡量把它們放在頁面的底部， 這樣一方面能順序顯示，另方面可達(dá)到最大的并行下載。瀏覽器會(huì)阻塞顯示直到樣式表下載完畢，因此我們需要把樣式表放在head 部分。而對(duì)于腳本來說，腳本后面內(nèi)容的順序顯示將被阻塞， 因此把腳本盡量放在底部意味著更多內(nèi)容能被快速顯示。腳本引起的第二個(gè)問題是它阻塞并行下載數(shù)量。http/1.1 規(guī)范建議瀏覽器每個(gè)主機(jī)的并行下載數(shù)不超過2 個(gè)。 因此如果您把圖像文件分布到多臺(tái)機(jī)器的話，您可以達(dá)到超過2 個(gè)的并行下載。但是當(dāng)腳本文件下載時(shí)，瀏覽器不會(huì)啟動(dòng)其他的并行下載，甚至其他主機(jī)的下載也不啟動(dòng)。在某些情況下，不是很容易就能把

11、腳本移到底部的。如，腳本使用document.write 方法來插入頁面內(nèi)容。同時(shí)可能還存在域的問題。不過在很多情況下，還是有一些方法的。一個(gè)備選方法是使用延遲腳本（deferred script）。defer 屬性表明腳本未包含 document.write，指示瀏覽器刻繼續(xù)顯示。不幸的是，firefox 不支持defer 屬性。ie 中，腳本可能被延遲執(zhí)行，但不一定得到需要的長(zhǎng)時(shí)間延遲。在 不過從另外角度來說，如果腳本能被延遲執(zhí)行，那它就可以被放在底部了。法則7. 避免css 表達(dá)式css 表達(dá)式是功能強(qiáng)大的(同時(shí)也是危險(xiǎn)的) 用于動(dòng)態(tài)設(shè)置css 屬性的方式。ie， 從版本 5 開始支持c

12、ss 表達(dá)式，如backgourd-color: expression(new date().gethours()%2?” #b8d4ff ” : ” #f08a00 ”)，即背景色每個(gè)小時(shí)切換一次。css 表達(dá)式的問題是其執(zhí)行次數(shù)超過大部分人的期望。不僅頁面顯示和resize 時(shí) 計(jì)算表達(dá)式，而且當(dāng)頁面滾屏，甚至當(dāng)鼠標(biāo)在頁面上移動(dòng)時(shí)都會(huì)重新計(jì)算表達(dá)式。 一種減少css 表達(dá)式執(zhí)行次數(shù)的方法是一次性表達(dá)式，即當(dāng)?shù)谝淮螆?zhí)行時(shí)就以明確的數(shù)值代替表達(dá)式。如果必須動(dòng)態(tài)設(shè)置的話，可使用事件處理函數(shù)代替。如果您必須使用css 表達(dá)式的話，請(qǐng)記住它們可能被執(zhí)行上千次，從而影響頁面性能。法則8. 把 java

13、script和 css 放到外部文件中上述很多性能優(yōu)化法則都基于外部文件進(jìn)行優(yōu)化。現(xiàn)在，我們必須問一個(gè)問題：javascript 和 css 應(yīng)該包括在外部文件，還是在頁面文件中？在現(xiàn)實(shí)世界中，使用外部文件會(huì)加快頁面顯示速度，因?yàn)橥獠课募?huì)被瀏覽器緩存。如果內(nèi)置javascript 和css 在頁面中雖然會(huì)減少http 請(qǐng)求次數(shù)，但增大了頁面的大小。另外一方面，使用外部文件， 會(huì)被瀏覽器緩存，則頁面大小會(huì)減小， 同時(shí)又不增加http 請(qǐng)求次數(shù)。因此，一般來說， 外部文件是更可行的方式。唯一的例外是內(nèi)嵌方式對(duì)主頁更有效，如 yahoo!和 my yahoo!都使用內(nèi)嵌方式。一般來說，在一個(gè)ses

14、sion 中，主頁訪問此時(shí)較少，因此內(nèi)嵌方式可以取得更快的用戶響應(yīng)時(shí)間。法則9. 減少dns 查詢次數(shù)dns 用于映射主機(jī)名和ip 地址， 一般一次解析需要20 120 毫秒。為達(dá)到更高的性能， dns 解析通常被多級(jí)別地緩存，如由isp 或局域網(wǎng)維護(hù)的caching server，本地機(jī)器操作系統(tǒng)的緩存（如windows 上的dns client service） ， 瀏覽器。 的缺省dns 緩存時(shí)間為30 分鐘， firefox 的缺省緩沖時(shí)間是1 分鐘。ie 減少主機(jī)名可減少dns 查詢的次數(shù)，但可能造成并行下載數(shù)的減少。避免dns 查 詢可減少響應(yīng)時(shí)間，而減少并行下載數(shù)可能增加響應(yīng)時(shí)間

15、。一個(gè)可行的折中是把內(nèi)容分布到至少2 個(gè)，最多4 個(gè)不同的主機(jī)名上。法則10. 最小化javascript代碼最小化javascript 代碼指在js 代碼中刪除不必要的字符，從而降低下載時(shí)間。兩個(gè)流行的工具是jsmin 和 yui compressor。 混淆是最小化于源碼的備選方式。象最小化一樣， 它通過刪除注釋和空格來減少源碼大小， 同時(shí)它還可以對(duì)代碼進(jìn)行混淆處理。作為混淆的一部分， 函數(shù)名和變量名被替換成短的字符串，這使得代碼更緊湊，同時(shí)也更難讀，使得難于被反向工程。 dojo compressor (shrinksafe)是最常見的混淆工具。最小化是安全的、直白的過程，而混淆則更復(fù)雜

16、，而且容易產(chǎn)生問題。從對(duì)美國(guó)10 大網(wǎng)站的調(diào)查來看，通過最小化，文件可減少21% ，而混淆則可減少25% 。 除了最小化外部腳本文件外，內(nèi)嵌的腳本代碼也應(yīng)該被最小化。即使腳本根據(jù)法則 4 被壓縮后傳輸，最小化腳本刻減少文件大小5% 或更高。法則11. 避免重定向重定向功能是通過301 和 302 這兩個(gè)http 狀態(tài)碼完成的，如：http/1.1 301 moved permanently location: http:/ content-type: text/html 瀏覽器自動(dòng)重定向請(qǐng)求到location 指定的url 上，重定向的主要問題是降低了用戶體驗(yàn)。一種最耗費(fèi)資源、經(jīng)常發(fā)生而很容易

17、被忽視的重定向是url 的最后缺少/ ，如訪問 http:/ 將被重定向到http:/ 下，可以通過alias ，mod_rewrite 或 directoryslash 等方式來解決該問題。法則12. 刪除重復(fù)的腳本文件在一個(gè)頁面中包含重復(fù)的js 腳本文件會(huì)影響性能，即它會(huì)建立不必要的http 請(qǐng)求和額外的js 執(zhí)行。不必要的http 請(qǐng)求發(fā)生在ie 下，而firefox 不會(huì)產(chǎn)生多余的http 請(qǐng)求。額外的js 執(zhí)行，不管在ie 下，還是在firefox 下，都會(huì)發(fā)生。一個(gè)避免重復(fù)的腳本文件的方式是使用模板系統(tǒng)來建立腳本管理模塊。除了防止重復(fù)的腳本文件外，該模塊還可以實(shí)現(xiàn)依賴性檢查和增加版

18、本號(hào)到腳本文件名中，從而實(shí)現(xiàn)超長(zhǎng)的過期時(shí)間。法則13. 配置etagsetags 是用于確定瀏覽器緩存中元素是否與web server 中的元素相匹配的機(jī)制，它是比 last-modified date 更靈活的元素驗(yàn)證機(jī)制。etag 是用于唯一表示元素版本的字符串， 它需被包括在引號(hào)中。 web server 首先在response 中指定etag ：http/1.1 200 ok 10c24bc-4ab-457e1c1f” content-length: 12195 后來，如果瀏覽器需要驗(yàn)證某元素，它使用if-none-match 頭回傳etag 給 web server ，如果etag 匹配，則服務(wù)器返回304 代