大家有沒有發(fā)現(xiàn)有些網(wǎng)站加載速度特別慢（當(dāng)然自己的站除外：）），雖然功能很簡單，也沒什么圖片，但是就是一個字“慢”，PC上就已經(jīng)夠慢了，別說手機(jī)移動端了，完全慘不忍睹。但如果一個網(wǎng)頁的如果打開速度超過4s，用戶基本就會直接關(guān)閉網(wǎng)頁了。

但一些大站，比如網(wǎng)易搜狐，雖然信息量巨大，圖片巨多，但是加載速度巨快，基本上是ms級的，為什么人家的就這么快呢？

大家可以看下周圍的網(wǎng)站是否有這些問題呢？

1 圖片未壓縮且未使用CDN：如果你看到一個網(wǎng)站上有N多圖，但你即不壓縮又不使用CDN，那么速度絕對會被拖慢。

2 未設(shè)置過期時間：靜態(tài)資源若沒有設(shè)置過期時間會導(dǎo)致不會被瀏覽器緩存，那么每一次都會重新到服務(wù)器重新拉取。

3 外鏈資源過多：如果你的JS或CSS文件很多，而且不做合并的話，由于每一次http請求多會消耗非常多的資源，因此會造成很大的資源浪費(fèi)。

使用YSlow，立馬發(fā)現(xiàn)網(wǎng)站是不是一坨shi。YSlow一個插件，Chrome和Firefox都可以下哦，

瀏覽器輸入地址，然后點(diǎn)擊測試，就可以測試網(wǎng)站啦，這是傳說中的大站，大家請看，

評分為A的大站

下面這個就不是很好啦

評分為D

我們來看看有哪些主要問題

1 HTTP請求過多（Make fewer HTTP request）

F（Fail）了

每一個HTTP請求都要消耗資源，是一個漫長的IO過程，所以，請求數(shù)量越少越好，以上這個例子有19個外部的JavaScript樣式， 13個外部的CSS樣式，如此多的外部引用，每個都會消耗大量的瀏覽器資源，所以我們需要做的是進(jìn)行壓縮合并處理：將所有的JavaScript文件合并成一個，將所有的CSS再合并成一個，這樣，就能大大減少HTTP請求了。常見的合并工具有很多，常見的有compile.js等等。

2 未使用內(nèi)容分發(fā)網(wǎng)絡(luò) Use a Content Delivery Network (CDN)

又 F（Fail）了

CDN（內(nèi)容分發(fā)網(wǎng)絡(luò)）是通過在網(wǎng)絡(luò)各處放置節(jié)點(diǎn)服務(wù)器，然后你請求某個資源時，這個虛擬網(wǎng)會把離你最近的資源分配給你。網(wǎng)絡(luò)中最浪費(fèi)流量的就是圖片資源了，小則十幾K，多則上百K，所以，如果圖片不錯CDN，將非常影響加載速度。國內(nèi)常用的CDN有阿里云、七牛啥的，這里可以推薦大家使用七牛，因?yàn)樵诹髁啃〉那闆r下，他是完全免費(fèi)的。

3 過期時間 (add expired headers)

過期時間

瀏覽器中都會有一個過期時間，通過Cache-Control首部和Expires首部來控制，比如我設(shè)為3天，那么在3天內(nèi)，你訪問這個靜態(tài)網(wǎng)站時，都會直接從瀏覽器緩沖中獲取，如果不設(shè)Cache-Control的話，那么每次就將會向服務(wù)器取數(shù)據(jù)。

4 JavaScript必須放到最后

這個想把大家都知道，引用的JavaScript文件必須放到HTML文件的最后。原因是因?yàn)闉g覽器的加載原理，瀏覽器當(dāng)中有一個叫“首屏?xí)r間”，所謂的首屏?xí)r間是網(wǎng)頁第一次顯示出來的時間，注意這個時間并不是網(wǎng)頁完全加載完畢的時間。因?yàn)闉g覽器是線性加載，只有在HTML元素全部加載完畢之后才會顯示，那么如果把JS放到前面的話，會導(dǎo)致必須加載完所有的JS代碼，會大大影響加載速度。

5 使用gZip壓縮

這個想必大家都知道，服務(wù)器端的靜態(tài)資源是能夠使用gZip壓縮的，只要在服務(wù)器中設(shè)置一下即可，壓縮之后靜態(tài)資源會至少縮小30%左右。

6 使用懶加載

無論如何，圖片還是太影響網(wǎng)頁加載速度了，比如10張圖片，全部加載的話可能要10秒，但是如果首頁只有2張圖的話，只顯示2張圖片，那么就是2秒了。懶加載組件有很多現(xiàn)成的，在github上搜索mlazy即可。

這是最實(shí)用的6個方法了，常見的優(yōu)化方式有yahoo的35條軍規(guī)，大家可自行搜索