淺談前端性能優化（一）

前端性能優化中，減小HTTP請求能夠提升頁面的響應速度。

瀏覽器在第一次訪問頁面時向服務器請求資源，並緩存起來，下次再訪問時會判斷在緩存中是否已有該資源且有沒有更新過，若是已有該資源且未更新過，則直接從瀏覽器緩存中讀取。原理：經過HTTP 請求頭中的 If-Modified-Since（If-No-Match） 和響應頭中的Last-Modified（ETag）來實現，HTTP請求把 If-Modified-Since（If-No-Match）傳給服務器，服務器將其與Last-Modified（ETag）對比，若相同，則文件沒有被改動過，則返回304，直接瀏覽器緩存中讀取資源便可。

問題：雖然該方法減小了已緩存資源的下載時間，但仍然發起了一次http請求。

解決：已緩存資源再也不發起http請求，即HTTP的Expires和Cache-Control。對一個網站而言，CSS、JavaScript、圖片等靜態資源更新的頻率都比較低，而這些文件又幾乎是每次HTTP請求都須要的，若是將這些文件緩存在瀏覽器中，能夠極好的改善性能。經過設置http頭中的cache-control和expires的屬性，可設定瀏覽器緩存，將靜態內容設爲永不過時，或者很長時間後才過時。

 

一、Cache-Control

Cache-Control屬性是在服務器端配置的，不一樣的服務器有不一樣的配置，apache、nginx、IIS、tomcat等配置都不盡相同。

以Apache爲例，在http.conf中作以下配置：

<filesMatch 」.(jpg|jpeg|png|gif|ico)$」>
Header set Cache Control max-age=16768000,public
</filesMatch>
<filesMatch 」.(css|js)$」>
Header set Cache Control max-age=2628000,public
</filesMatch>
問題：瀏覽器緩存的資源，若又想更新資源，如何實現？

解決：經過修改該資源的名稱來實現。修改了資源名稱，瀏覽器會當作不一樣的資源。

 

二、Expires

Expires屬性也是在服務端配置的，具體的配置也根據服務器而定。

問題：可能存在客戶端時間跟服務端時間不一致的問題。

解決：建議Expires結合Cache-Control一塊兒使用。

 

三、測試實例：

1) 未使用expires和cache-control的測試demo：

打開網址：http://stevesouders.com/hpws/expiresoff.php

2) 使用expires和cache-control的測試demo：