摘要：前端優(yōu)化是復(fù)雜的，針對(duì)方方面面的資源都有不同的方式。前端性能優(yōu)化前端性能團(tuán)隊(duì)總結(jié)的條黃金定律的團(tuán)隊(duì)總結(jié)出了一系列可以提高網(wǎng)站速度的方法。提高性能的措施中最重要的方法就是使響應(yīng)具有可緩存性。

從用戶角度而言，優(yōu)化能夠讓頁(yè)面加載得更快、對(duì)用戶的操作響應(yīng)得更及時(shí)，能夠給用戶提供更為友好的體驗(yàn)。

從服務(wù)商角度而言，優(yōu)化能夠減少頁(yè)面請(qǐng)求數(shù)、或者減小請(qǐng)求所占帶寬，能夠節(jié)省可觀的資源。

總之，恰當(dāng)?shù)膬?yōu)化不僅能夠改善站點(diǎn)的用戶體驗(yàn)并且能夠節(jié)省相當(dāng)?shù)馁Y源利用。

Yahoo 的Excetional Performance 團(tuán)隊(duì)總結(jié)出了一系列可以提高網(wǎng)站速度的方法。可以分為 7大類 35條（包括內(nèi)容、服務(wù)器、CSS、JavaScript、Cookie、圖片、移動(dòng)應(yīng)用）。

盡量減少 HTTP 請(qǐng)求

減少 DNS 查找

避免跳轉(zhuǎn)

緩存 Ajax

推遲加載

提前加載

減少 DOM 元素?cái)?shù)量

用域名劃分頁(yè)面內(nèi)容

使 frame 數(shù)量最少

避免404錯(cuò)誤

合并文件是通過(guò)把所有的腳本放到一個(gè)文件中來(lái)減少 HTTP請(qǐng)求的方法。

CSS Sprites是減少圖像請(qǐng)求的有效方法。

緩存 DNS查找可以改善頁(yè)面性能。

跳轉(zhuǎn)是使用 301和 302代碼實(shí)現(xiàn)的（但是要記住跳轉(zhuǎn)會(huì)降低用戶體驗(yàn)）。

為了提高性能，優(yōu)化 Ajax響應(yīng)是很重要的。提高 Ajxa性能的措施中最重要的方法就是使響應(yīng)具有可緩存性。

你可以仔細(xì)看一下你的網(wǎng)頁(yè)，問問自己“哪些內(nèi)容是頁(yè)面呈現(xiàn)時(shí)所必需首先加載的？哪些內(nèi)容和結(jié)構(gòu)可以稍后再加載？預(yù)加載和后加載看起來(lái)似乎恰恰相反，但實(shí)際上預(yù)加載是為了實(shí)現(xiàn)另外一種目標(biāo)。預(yù)加載是在瀏覽器空閑時(shí)請(qǐng)求將來(lái)可能會(huì)用到的頁(yè)面內(nèi)容（如圖像、樣式表和腳 本）。使用這種方法，當(dāng)用戶要訪問下一個(gè)頁(yè)面時(shí)，頁(yè)面中的內(nèi)容大部分已經(jīng)加載到緩存中了，因此可以大大改善訪問速度。

一個(gè)復(fù)雜的頁(yè)面意味著需要下載更多數(shù)據(jù)，同時(shí)也意味著JavaScript遍歷DOM的效率越慢。比如當(dāng)你增加一個(gè)事件句柄時(shí)在500和5000個(gè) DOM元素中循環(huán)效果肯定是不一樣的。

把頁(yè)面內(nèi)容劃分成若干部分可以使你最大限度地實(shí)現(xiàn)平行下載。

使iframe的數(shù)量最小，ifrmae元素可以在父文檔中插入一個(gè)新的HTML文檔。了解iframe的工作理然后才能更加有效地使用它，這一點(diǎn)很重要。

HTTP請(qǐng)求時(shí)間消耗是很大的，因此使用HTTP請(qǐng)求來(lái)獲得一個(gè)沒有用處的響應(yīng)（例如404沒有找到頁(yè)面）是完全沒有必要的，它只會(huì)降低用戶體驗(yàn)而不會(huì)有一點(diǎn)好處。

使用內(nèi)容分發(fā)網(wǎng)絡(luò)

為文件頭指定 Expires 或 Cache-Control

Gzip壓縮文件內(nèi)容

配置ETag

盡早刷新輸出緩沖

使用 GET 來(lái)完成 AJAX 請(qǐng)求

避免空的圖像來(lái)源

用戶與你網(wǎng)站服務(wù)器的接近程度會(huì)影響響應(yīng)時(shí)間的長(zhǎng)短。把你的網(wǎng)站內(nèi)容分散到多個(gè)、處于不同地域位置的服務(wù)器上可以加快下載速度。

為文件頭指定Expires或Cache-Control，這條守則包括兩方面的內(nèi)容： 對(duì)于靜態(tài)內(nèi)容：設(shè)置文件頭過(guò)期時(shí)間Expires的值為“Never expire”（永不過(guò)期）；對(duì)于動(dòng)態(tài)內(nèi)容：使用恰當(dāng)?shù)腃ache-Control文件頭來(lái)幫助瀏覽器進(jìn)行有條件的請(qǐng)求。

網(wǎng)絡(luò)傳輸中的HTTP請(qǐng)求和應(yīng)答時(shí)間可以通過(guò)前端機(jī)制得到顯著改善。的確，終端用戶的帶寬、互聯(lián)網(wǎng)提供者、與對(duì)等交換點(diǎn)的靠近程度等都不是網(wǎng)站開發(fā)者所能決定的。但是還有其他因素影響著響應(yīng)時(shí)間。通過(guò)減小HTTP響應(yīng)的大小可以節(jié)省HTTP響應(yīng)時(shí)間。

Entity tags（ETags）（實(shí)體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機(jī)制（“實(shí)體”就是所說(shuō)的“內(nèi) 容”，包括圖片、腳本、樣式表等）。增加ETag為實(shí)體的驗(yàn)證提供了一個(gè)比使用“l(fā)ast-modified date（上次編輯時(shí)間）”更加靈活的機(jī)制。

當(dāng)用戶請(qǐng)求一個(gè)頁(yè)面時(shí)，無(wú)論如何都會(huì)花費(fèi)200到500毫秒用于后臺(tái)組織HTML文件。（盡早刷新輸出緩沖）。

Yahoo!Mail團(tuán)隊(duì)發(fā)現(xiàn)，當(dāng)使用XMLHttpRequest時(shí)，瀏覽器中的POST方法是一個(gè)“兩步走”的過(guò)程：首先發(fā)送文件頭，然后才發(fā)送數(shù) 據(jù)。因此使用GET最為恰當(dāng)，因?yàn)樗恍璋l(fā)送一個(gè)TCP包（除非你有很多cookie）。IE中URL的最大長(zhǎng)度為2K，因此如果你要發(fā)送一個(gè)超過(guò)2K的 數(shù)據(jù)時(shí)就不能使用GET了。

把樣式表置于頂部

避免使用 CSS 表達(dá)式（）

用 代替 @import

避免使用濾鏡

在研究Yahoo!的性能表現(xiàn)時(shí)，我們發(fā)現(xiàn)把樣式表放到文檔的內(nèi)會(huì)使頁(yè)面有步驟的加載顯示。

避免使用CSS表達(dá)式（Expression），CSS表達(dá)式是動(dòng)態(tài)設(shè)置CSS屬性的強(qiáng)大（但危險(xiǎn)）方法。Internet Explorer從第5個(gè)版本開始支持CSS表達(dá)式。

對(duì)于擁有較大瀏覽量的首頁(yè)來(lái)說(shuō)，有一種技術(shù)可以平衡內(nèi)置代碼帶來(lái)的HTTP請(qǐng)求減少與通過(guò)使用外部文件進(jìn)行緩存帶來(lái)的好處。

（削減JavaScript和CSS）精簡(jiǎn)是指從去除代碼不必要的字符減少文件大小從而節(jié)省下載時(shí)間。消減代碼時(shí)，所有的注釋、不需要的空白字符（空格、換行、tab縮進(jìn)）等都要去掉。

前面的最佳實(shí)現(xiàn)中提到CSS應(yīng)該放置在頂端以利于有序加載呈現(xiàn)。在IE中，頁(yè)面底部@import和使用作用是一樣的，因此最好不要使用它。

IE獨(dú)有屬性AlphaImageLoader用于修正7.0以下版本中顯示PNG圖片的半透明效果。這個(gè)濾鏡的問題在于瀏覽器加載圖片時(shí)它會(huì)終止內(nèi)容的 呈現(xiàn)并且凍結(jié)瀏覽器。在每一個(gè)元素（不僅僅是圖片）它都會(huì)運(yùn)算一次，增加了內(nèi)存開支，因此它的問題是多方面的。

把腳本置于頁(yè)面底部

使用外部 JavaScript 和 CSS

削減 JavaScript 和 CSS

剔除重復(fù)腳本

減少DOM訪問

開發(fā)智能事件處理程序

腳本帶來(lái)的問題就是它阻止了頁(yè)面的平行下載。HTTP/1.1 規(guī)范建議，瀏覽器每個(gè)主機(jī)名的并行下載內(nèi)容不超過(guò)兩個(gè)。一個(gè)經(jīng)常用到的替代方法就是使用延遲腳本。

在同一個(gè)頁(yè)面中重復(fù)引用JavaScript文件會(huì)影響頁(yè)面的性能。你可能會(huì)認(rèn)為這種情況并不多見。對(duì)于美國(guó)前10大網(wǎng)站的調(diào)查顯示其中有兩家存在重復(fù)引 用腳本的情況。有兩種主要因素導(dǎo)致一個(gè)腳本被重復(fù)引用的奇怪現(xiàn)象發(fā)生：團(tuán)隊(duì)規(guī)模和腳本數(shù)量。

使用JavaScript訪問DOM元素比較慢，因此為了獲得更多的應(yīng)該頁(yè)面，應(yīng)該做到：緩存已經(jīng)訪問過(guò)的有關(guān)元素，線下更新完節(jié)點(diǎn)之后再將它們添加到文檔樹中，避免使用JavaScript來(lái)修改頁(yè)面布局，有關(guān)此方面的更多信息請(qǐng)查看Julien Lecomte在YUI專題中的文章“高性能Ajax應(yīng)該程序”。

有時(shí)候我們會(huì)感覺到頁(yè)面反應(yīng)遲鈍，這是因?yàn)镈OM樹元素中附加了過(guò)多的事件句柄并且些事件句病被頻繁地觸發(fā)。這就是為什么說(shuō)使用event delegation（事件代理）是一種好方法了。

減小Cookie體積

對(duì)于頁(yè)面內(nèi)容使用無(wú)coockie域名

coockie 是通過(guò)HTTP文件頭來(lái)在web服務(wù)器和瀏覽器之間進(jìn)行交流的。去除不必要的coockie，使coockie體積盡量小以減少對(duì)用戶響應(yīng)的影響，注意在適應(yīng)級(jí)別的域名上設(shè)置coockie以便使子域名不受影響；設(shè)置合理的過(guò)期時(shí)間。較早地Expire時(shí)間和不要過(guò)早去清除coockie，都會(huì)改善用戶的響應(yīng)時(shí)間。

對(duì)于頁(yè)面內(nèi)容使用無(wú)coockie域名，當(dāng)瀏覽器在請(qǐng)求中同時(shí)請(qǐng)求一張靜態(tài)的圖片和發(fā)送coockie時(shí)，服務(wù)器對(duì)于這些coockie不會(huì)做任何地使用。因此他們只是因?yàn)槟承┴?fù)面因素而創(chuàng)建的 網(wǎng)絡(luò)傳輸。所有你應(yīng)該確定對(duì)于靜態(tài)內(nèi)容的請(qǐng)求是無(wú)coockie的請(qǐng)求。創(chuàng)建一個(gè)子域名并用他來(lái)存放所有靜態(tài)內(nèi)容。

優(yōu)化圖像

優(yōu)化 CSS Spirite

不要在 HTML 中縮放圖像

favicon.ico 要小而且可緩存

優(yōu)化圖像和CSS Spirite，在Spirite中水平排列你的圖片，垂直排列會(huì)稍稍增加文件大小；Spirite 中把顏色較近的組合在一起可以降低顏色數(shù)，理想狀況是低于256色以便適用PNG8格式；

favicon.ico是位于服務(wù)器根目錄下的一個(gè)圖片文件。它是必定存在的，因?yàn)榧词鼓悴魂P(guān)心它是否有用，瀏覽器也會(huì)對(duì)它發(fā)出請(qǐng)求，因此最好不要返回一 個(gè)404 Not Found的響應(yīng)。

七、 Mobile部分

保持單個(gè)內(nèi)容小于25K

打包組件成復(fù)合文本

保持單個(gè)內(nèi)容小于25K，這條限制主要是因?yàn)閕Phone不能緩存大于25K的文件。注意這里指的是解壓縮后的大小。由于單純gizp壓縮可能達(dá)不要求，因此精簡(jiǎn)文件就顯得十分重要。

打包組件成復(fù)合文本，把頁(yè)面內(nèi)容打包成復(fù)合文本就如同帶有多附件的Email，它能夠使你在一個(gè)HTTP請(qǐng)求中取得多個(gè)組件（切記：HTTP請(qǐng)求是很奢侈的）。當(dāng)你使用這條規(guī)則時(shí)，首先要確定用戶代理是否支持（iPhone就不支持）。