前端效能優化中，減少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的屬性，可設定瀏覽器快取，將靜態內容設為永不過期，或者很長時間後才過期。

1、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>
問題：瀏覽器快取的資源，若又想更新資源，如何實現？

解決：通過修改該資源的名稱來實現。修改了資源名稱，瀏覽器會當做不同的資源。

2、Expires

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

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

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

3、測試例項：

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

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

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

開啟網址：http://stevesouders.com/hpws/expireson.php
---------------------
作者：筱葭
來源：CSDN
原文：https://blog.csdn.net/zhouziyu2011/article/details/71312452
版權宣告：本文為博主原創文章，轉載請附上博文連結！