記得面試現在這份工作的時(shí)候，一位領(lǐng)導語(yǔ)重心長(cháng)地談道——當今的世界是互聯(lián)網(wǎng)的世界，IT企業(yè)之間的競爭是很激烈的，如果一個(gè)網(wǎng)頁(yè)的加載和顯示速度，相比別人的站點(diǎn)頁(yè)面有那么0.1秒的提升，那也是很大的一個(gè)成就。

然后我不知道怎么寫(xiě)下去了，就在群里問(wèn)了那群狗頭軍師，結果是這樣的。。。

好的，是時(shí)候“語(yǔ)鋒一轉”切回主題了 —— 如何提升我們站點(diǎn)頁(yè)面的訪(fǎng)問(wèn)速度、減少等待時(shí)間，從而最大化地提升用戶(hù)訪(fǎng)問(wèn)體驗呢？

針對這個(gè)問(wèn)題，我們今天會(huì )從前端的角度來(lái)提出系列解決方案，它們都能有效地提升你頁(yè)面的訪(fǎng)問(wèn)速度。

一. 減少對服務(wù)器的文件請求

常規的HTTP請求屬于“請求”-“應答”-“斷開(kāi)”形式的短連接，每一個(gè)獨立的資源我們都會(huì )向服務(wù)器發(fā)去一份get請求，再等服務(wù)端將我們需要的文件傳回來(lái)。每一次資源的請求都實(shí)實(shí)在在地耗費了一次“連接-等待-接收”的時(shí)間（當然將http請求設為keep-alive長(cháng)連接狀態(tài)可以減少“連接”的次數和時(shí)間），如果我們能有效減少對服務(wù)器文件的請求次數，便意味著(zhù)我們可以從這塊省下一些頁(yè)面等待時(shí)間，也可以順便減少服務(wù)器的負擔。

對于這個(gè)解決方案，我們可以這么做：

1. 使用css sprite技術(shù)合并多個(gè)圖片為單個(gè)圖片文件，實(shí)際使用時(shí)通過(guò)background-position來(lái)定位背景位置（相信大家第一個(gè)想到的也是這個(gè)吧）；

2. 合并多個(gè)css樣式文件為單個(gè)樣式文件，合并多個(gè)腳本為單個(gè)腳本，再在頁(yè)面中引用合并后的樣式/腳本文件。對于這個(gè)你可以使用r.js來(lái)幫忙，但我個(gè)人倒是不怎么推薦這個(gè)方法，因為合并了文件之后，多個(gè)頁(yè)面之間公共部分的樣式/腳本文件就無(wú)法緩存到客戶(hù)端了；

3. 使用base64編碼來(lái)展示圖片。就如圖github 404頁(yè)面那樣：

你可以使用這個(gè)工具來(lái)幫你把圖片轉換為base64編碼的文件流，但常規只推薦你把這種方式使用在用戶(hù)重復訪(fǎng)問(wèn)量較少的頁(yè)面，因為它們雖然無(wú)須從服務(wù)端get一遍，但也無(wú)法緩存在客戶(hù)端，導致用戶(hù)每次訪(fǎng)問(wèn)頁(yè)面都要重新渲染一次。而且冗長(cháng)的文件流代碼會(huì )占用你頁(yè)面很大的代碼空間，維護起頁(yè)面來(lái)估計也會(huì )挺心塞；

4. 將小塊的css、js代碼段直接寫(xiě)在頁(yè)面上，而非在頁(yè)面引入獨立的樣式/腳本文件。相信有的朋友看慣了“保持結構 （標記）、表現 （樣式）、行為 （腳本）三者分離”的規范，對此觀(guān)點(diǎn)可能有些意見(jiàn)。只能說(shuō)規范不是教條，適合自己的才是硬道理。直接把小段的、復用率低的樣式/腳本直接寫(xiě)于頁(yè)面上帶來(lái)的利還是大于弊的（弊可能也就是增大了頁(yè)面代碼量、不那么好維護了點(diǎn)）。反觀(guān)所有主流門(mén)戶(hù)網(wǎng)站的頁(yè)面源文件，基本沒(méi)有一個(gè)是把樣式/腳本都全部作為外部文件引入的（無(wú)論他們是否從減少服務(wù)器請求這點(diǎn)出發(fā)，事實(shí)都是這樣）；

5. 利用http-equiv="expires"元標簽，設定一個(gè)未來(lái)的某時(shí)間點(diǎn)作為頁(yè)面文件過(guò)期時(shí)間，用戶(hù)在過(guò)期時(shí)間之前所獲取到的頁(yè)面文件都僅從緩存中去取。不過(guò)這個(gè)辦法太死板（有時(shí)候即使服務(wù)端及時(shí)把過(guò)期時(shí)間更改為已結束時(shí)間，客戶(hù)端可能都不會(huì )按照新更改的規則去服務(wù)端獲取新文件資源），常規是不推薦使用的。

二. 減少文件大小

文件太大（特別是圖片）導致加載時(shí)間較長(cháng)，往往都是影響頁(yè)面加載體驗的頭號大敵，那么盡可能減少請求文件的大小便是相當重要的事情了，我們可以做的事情有：

1. 壓縮樣式/腳本文件，就此你可以使用gulp或者grunt來(lái)實(shí)現這點(diǎn)，它們均能很好地減少css/js文件的大?。▽τ趈s還能起到混淆變量、函數名的作用）；

2. 針對性選擇圖片格式，在無(wú)透明背景需求下，對于顏色較單一、無(wú)色彩漸變的圖片僅使用gif格式，對于jpg圖片也可按照其清晰度要求，在導出jpg的時(shí)候選擇對應的“品質(zhì)”進(jìn)行優(yōu)化：

如果你喜歡嘗鮮，可以學(xué)淘寶那樣使用webp圖片格式，它能很好地優(yōu)化同畫(huà)質(zhì)下的文件大?。?/p>

3. 使用Font Awesome來(lái)替代頁(yè)面上的圖標，其原理是使用@font-face讓用戶(hù)下載一個(gè)非常小的UI字體包，把頁(yè)面上用到的圖標以字符的形式來(lái)顯示，從而減少了圖片需求和圖標文件大小。

三. 適度使用CDN

使用CDN有幾個(gè)好處：如果用戶(hù)在其它站點(diǎn)下載過(guò)這個(gè)CDN資源，那么來(lái)我們站點(diǎn)僅僅從緩存獲取即可；減少了對自己站點(diǎn)服務(wù)器的文件請求（外部CDN的情況下），減少服務(wù)器負擔；多個(gè)域會(huì )使瀏覽器允許異步下載資源的最大數量增多，比如一個(gè)站點(diǎn)只從一個(gè)域來(lái)請求資源，那么FireFox只允許同時(shí)刻最多異步下載2個(gè)文件，但如果使用了外部CDN來(lái)引入資源，那么FF允許在同時(shí)異步下載本域中的兩個(gè)資源外，還額外允許同時(shí)異步下載另一個(gè)域（CDN）下的2個(gè)資源。

但是使用CDN有一個(gè)很大的問(wèn)題——增加了dns解析的開(kāi)銷(xiāo)，如果一個(gè)頁(yè)面同時(shí)引入了多個(gè)CDN的資源，可能會(huì )因為dns解析而陷入較多的等待時(shí)間，導致得不償失。

對于這個(gè)問(wèn)題，常規是建議一個(gè)站點(diǎn)下只使用同一個(gè)可靠、快速的CDN來(lái)引入各種所需資源即可，也就是說(shuō)，建議一個(gè)頁(yè)面從2個(gè)不同的域（比如站點(diǎn)域和CDN域）下來(lái)請求資源是最佳的選擇（據說(shuō)這個(gè)結論是雅虎前端工程師提出的）。

四. 延遲請求、異步加載腳本

在各主流瀏覽器下，常規情況，我們的腳本文件跟隨其它資源文件一樣都是異步下載的，但這里存在一個(gè)問(wèn)題——比如FireFox下載好腳本后的一小段時(shí)間內會(huì )有“執行阻塞”的情況發(fā)生，也就是說(shuō)瀏覽器下載好腳本后執行它的這段時(shí)間里，瀏覽器的其它行為被阻塞，導致頁(yè)面上的其它資源都是無(wú)法被請求和下載的：

如果你頁(yè)面里存在js代碼執行時(shí)間過(guò)長(cháng)的情況，那么用戶(hù)就會(huì )明顯感覺(jué)到頁(yè)面的延遲。解決這個(gè)問(wèn)題有一個(gè)簡(jiǎn)單的方法——將腳本請求標簽放置到結束標簽前，使得頁(yè)面上的腳本成為最后被請求的資源，自然也不會(huì )阻塞其它頁(yè)面資源的請求事件了。

另外，雖然上面提到“我們的腳本文件跟隨其它資源文件一樣都是異步下載的”，但異步下載不代表異步執行，為了嚴格保證腳本邏輯順序和依賴(lài)關(guān)系的正確性，瀏覽器會(huì )按照腳本被請求的先后順序來(lái)執行腳本。那么問(wèn)題就來(lái)了——如果頁(yè)面上的腳本依賴(lài)關(guān)系并不大，甚至沒(méi)有任何相互間的依賴(lài)，那么瀏覽器的這套規則就僅僅增加了頁(yè)面請求阻塞時(shí)間而已（就像你花大錢(qián)買(mǎi)了一筆保險，但被保險期間你平安無(wú)事啥都沒(méi)發(fā)生…… 嗯，這個(gè)比喻有點(diǎn)反人類(lèi)……）。

解決這個(gè)問(wèn)題的辦法無(wú)非就是讓腳本無(wú)阻塞地異步執行，比如給script標簽加上defer和async屬性或者動(dòng)態(tài)注入腳本（可以參考這里），但這些都不是良好的解決方案，要么存在兼容性問(wèn)題，要么太麻煩還無(wú)法處理依賴(lài)。

個(gè)人是推薦使用 requireJS（AMD規范） 或 seaJS（CMD規范） 來(lái)異步加載腳本并處理模塊依賴(lài)的，前者將“依賴(lài)前置”（預加載所有被依賴(lài)腳本模塊，執行速度最快），后者走的“依賴(lài)就近”（懶加載被依賴(lài)腳本模塊，請求腳本更科學(xué)），你可以根據項目具體需求來(lái)選擇最合適的。

五. 延遲請求首屏外的文件

先解釋下，“首屏”指的是頁(yè)面初始化時(shí)候的頁(yè)面內容顯示區域，也就是頁(yè)面一加載，用戶(hù)就首先看到的區域。

比如像京東啊淘寶啊，對于需要滾動(dòng)頁(yè)面才能看到的圖片內容，都做了類(lèi)似lazyload的處理，這些無(wú)非都是走了代理模式的理念，但的確給用戶(hù)一個(gè)錯覺(jué)——這個(gè)頁(yè)面更快地加載完了，因為我很快就看到了屏幕上的內容（即使我還沒(méi)下拉滾動(dòng)條，而頁(yè)面后方的文件其實(shí)還沒(méi)真正加載呢）。

我們可以這樣實(shí)現此方案，不依賴(lài)任何lazyload庫，拿圖片來(lái)做示范，我們可以這樣編寫(xiě)首屏外的圖片（假設某張圖片地址是a.jpg）的img標簽：

如上所示，頁(yè)面初步加載這張圖片的時(shí)候是直接以base64的方式（當然你也可以統一使用一張占位圖loading.gif來(lái)替代）來(lái)快速顯示一張極小的圖片的，而圖片本身的真實(shí)路徑是存在data-src屬性?xún)鹊?，我們可以在?yè)面加載結束后再向服務(wù)器請求它真實(shí)的文件并替換：

function init(){

     var imgDefer = document.getElementsByTagName('img');

     for (var i=0; i

         if(imgDefer[i].getAttribute('data-src')) {

            imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));

        }

    }

}

window.onload = init;

如上是對圖片的延遲加載處理，對于視頻、音頻文件，可以采取完全一樣的原理來(lái)延遲加載，從而有效減少頁(yè)面初始化等待時(shí)間。

六. 優(yōu)化頁(yè)面模塊排放順序

這里有一個(gè)很好的例子，比如有一個(gè)頁(yè)面是這樣的——左邊是側邊欄，用于存放用戶(hù)的頭像啊、資料啊，以及網(wǎng)站投放的廣告啊，而右側是文章內容區域：

 那么我們的代碼很可能是這樣的：

于是乎，瀏覽器按照它的UI單線(xiàn)程準則從上到下先加載了側邊欄，再加載我們的文章。。。

很明顯，這樣不是一個(gè)人性化的加載順序，我們得弄清楚，頁(yè)面上各個(gè)區域模塊，對于用戶(hù)而言，哪個(gè)才是最重要、最應當首先展示的。

對于上面的例子，文章內容才應該是用戶(hù)首先要看到、需要瀏覽器優(yōu)先請求和顯示的區域。所以我們得修改我們的代碼為：

當然這里僅僅是用一個(gè)小示例來(lái)挑起各位的腦洞，懂得舉一反三和實(shí)際運用才是硬道理。

七. 其它建議

1. 不要在css中使用@import，它會(huì )讓一個(gè)樣式文件去等待另一個(gè)樣式文件的請求，無(wú)形中增加了頁(yè)面等待時(shí)間（當然如果走的scss，@import就是另一回事了，呃跑題了~）；

2. 避免頁(yè)面或者頁(yè)面文件重定向查找，這相當于你走進(jìn)了一間衛生間，然后看到上面的牌子說(shuō)“此處不同，請去前面左拐的衛生間”，又得重走一遍；

3. 減少無(wú)效請求——比如通過(guò)css/js來(lái)請求一個(gè)不存在的資源，可能會(huì )導致較長(cháng)的等待和阻塞（直到它返回錯誤信息）；

4. 無(wú)論你是否決定將腳本放到頁(yè)尾，但一定要保障腳本放置于樣式文件后方；

5. 配置.htaccess文件、走Gzip頁(yè)面壓縮形式、開(kāi)啟keep-alive連接模式等后端解決方案，這邊就不細說(shuō)了。

相信頁(yè)面提速的方案絕對不僅僅局限于上面提到的這些，而且每個(gè)項目都有著(zhù)各種需求和情況，只能按需選擇適合自己的方案。

但最重要的還是——盡量把用戶(hù)的體驗放在第一位，無(wú)論是頁(yè)面的加載或者交互，都應當多從用戶(hù)角度切入去思考和設計最優(yōu)選的方案，這樣相信你一定能做出出色、受歡迎的作品。

今天聊的就是這些，共勉~