頁面加載性能之HTTP緩存

時間 2020-07-18

原文原文鏈接

當用戶訪問一個站點的時候，全部的資源都必須有一個來源。全部的文本、圖片、樣式、腳本等資源都必須被瀏覽器接收到才能展示和執行。開發者能夠給瀏覽器提供選擇，選擇是從哪裏獲取這些資源，這樣能夠極大地提高頁面加載速度。javascript

頁面第一次加載完以後，瀏覽器把這些資源存在了 HTTP Cache 中。第二次打開這個頁面的時候，瀏覽器會優先從硬盤中查找這些資源的緩存，比從服務器去下載要更快一些。css

雖然HTTP緩存是由 Internet Engineering Task Force (IETF) specifications 定製的規範，可是瀏覽器能夠擁有多種不一樣的緩存，它們在獲取、存儲、保存內容的方式上也各不相同。你能夠閱讀這篇文章來了解這些緩存的區別 A Tale of Four Caches。html

固然第一次訪問站點沒有緩存。第二次訪問也可能沒有緩存，由於用戶可能會手動清除了緩存，也多是強制刷新。仍然有很大一部分用戶可以享受到緩存帶來的飛速打開體驗，最大化利用緩存能給讓這批用戶打開速度有質的飛躍。java

開啓緩存

咱們能夠根據資源的改動頻率來決定緩存的方式。像站點logo可能基本上不會變化，而腳本可能隔幾天就變一次。你須要去分辨哪些資源是動態的，哪些又是靜態的，這樣才能針對性的開啓緩存，或者決定緩存的有效時間。nginx

緩存頭（Cache Headers）

目前有兩種主要的緩存頭，cache-control 和 expires，能夠用來定義資源的緩存特性。cache-control可能會相對而言更現代化、更靈活。這二者也能夠同時使用。web

緩存頭是服務器層設置的，nginx和apache都有本身的語法。apache

Cache-control

如下是apache的.htaccess文件的配置：瀏覽器

<filesMatch ".(ico|jpg|jpeg|png|gif)$">
 Header set Cache-Control "max-age=2592000, public"
</filesMatch>

針對圖片文件，咱們通常設置一個月的過時時間緩存

<filesMatch ".(css|js)$">
 Header set Cache-Control "max-age=86400, public"
</filesMatch>

cache-control有一系列的配置項，也被稱爲指令，用來告知瀏覽器如何處理緩存。如下是部分經常使用的指令，更多內容能夠看 Mozilla Developer Network。服務器

no-cache: 優先從服務器獲取資源，若是服務器返回304，告知沒有修改，則應用本地緩存
no-store: 永遠不緩存，經常使用於一些敏感信息，常常變更
public: 能夠被瀏覽器和中間層服務器緩存
private: 只能被瀏覽器緩存，中間層服務器不能緩存
max-age: 定義了內容能夠被緩存的有效時間，秒級的整數，如：86400（一天）

Expires Caching

你能夠針對不一樣類型的資源定義不一樣的過時時間，如下是.htaccess文件的配置：

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
## EXPIRES CACHING ##