Web 緩存

Web 緩存的作用與類型

Web 緩存機制 (瀏覽器端)

根據 Meta 標籤和 HTTP Header 頭來決定是否緩存 (根據 新鮮度 (過期機制) 和 校驗值 (驗證機制 Etag))

有關緩存的消息報頭

oVs7Rs ZiGo2U

緩存優先級

用戶操作行爲與緩存

KZp86X

無法緩存的請求

使用緩存

服務器配置

Apache Nginx 進行緩存頭配置

動態腳本配置

服務端代碼 Header 頭增加 Expires/Cache-Control/Etag 等信息, 更精細的控制緩存效果

禁用緩存

方法 1 在 meta 標籤標明

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

方法 2 動態 setRequestHeader

cache-control='no-cache,no-store'
pragma='no-cache'
if-modified-since=0;

方法 3 請求端設置if-modified-since爲已經過期的某個時間，可以是幾年前或者幾十年前。

方法 4 服務端設置 Expires 爲過期某個時間

需要一致性檢測則儘量去配合 Etag 以及 last-Modified 去進行比較然後返回使用緩存還是新數據

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

方法 3 url 後面加隨機數或者時間戳

url += “&random=” + Math.random()

Ajax 緩存

非冪等請求緩存 (POST)

一些idempotent request並不能通過Get來實現的時候，例如，搜索 API 通常會需要很多的參數，尤其是那些擁有很多屬性的產品，而這些屬性都必須通過參數來傳遞。問題來了，如果請求攜帶的參數超過了 GET 請求的限制長度怎麼辦?

HTTP 的協議規範允許滿足下列條件中其一的以緩存來響應:

解決方式:

將 POST 的內容（附帶一部分頭信息），做一個摘要，將摘要附在 URL 後面，使用這個來作爲緩存的 key。換句話說，緩存主鍵被修改爲包括 URL 以及一些請求體，後續的擁有相同的請求體的請求將會命中緩存。在實踐的過程中我添加了一些頭腦保證緩存的唯一性。

優勢

這個解決方案的變種可以用在正向代理和反向代理，甚至兩者都用

HTML5 離線緩存

Manifest

CACHE MANIFEST
# 直接緩存的文件
CACHE:
Path/to/cache.js
# version：2012-03-20

離線應用訪問及更新流程

離線機制的緩存用途

從 Manifest 的機制來看，即使我們不是爲了創建離線應用，也同樣可以使用這種機制用於緩存文件，可以說是給 Web 緩存提供多一種可以選擇的途徑。

存在的問題

Localstorage

Localstorage存儲的地方是跟 Web 緩存分開的，是瀏覽器重新開闢的一個地方。嚴格來講不屬於Web緩存
Localstorage 的作用

使 Web 頁面能夠通過瀏覽器提供的set/get接口，存儲一些自定義的信息到本地硬盤，並且在單次訪問或以後的訪問過程中隨時獲取或修改。

Localstorage 的 API

setItem/getItem/removeItem/clear

Localstorage 的緩存用途

Localstorage 設計的本意可能是用來存儲一些用戶操作的個性化設置的文本類型的信息和數據，當我們其實也可能拿來當 Web 緩存區使用，比如我們可以將 Base64 格式編碼的圖片信息，存在 localstorage 中，再次訪問時，直接本地獲取後，使用 Css3 的 Data:image 的方式直接展現出來。

Localstorage 的存在的問題

大小限制，目前瀏覽器只給每個獨立的域名提供 5m 的存儲空間，當存儲超過 5m，瀏覽器就會彈出警告框。

Apache 緩存設置

對於 Apache 服務器，可以通過 mod_expires 模塊來設定Expires或Cache-ControlHTTP 頭。編輯相應目錄下的 .htaccess 文件，或直接對 Apache 的配置文件（根據服務器系統版本不同，可能爲httpd.conf或apache2.conf等）作出修改。

分文件類別設定

使用 ExpiresByType 可以按照文件的 MIME Type 設定某一類文件的過期日期。例如：

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css                "access plus 1 week"
    ExpiresByType application/javascript  "access plus 2 weeks"
    ExpiresByType image/x-icon            "access plus 6 months"
    ExpiresByType image/gif               "access plus 6 months"
    ExpiresByType image/png               "access plus 6 months"
    ExpiresByType image/jpeg              "access plus 6 months"
    ExpiresByType video/x-flv             "access plus 6 months"
    ExpiresByType application/pdf         "access plus 6 months"
</IfModule>

其中 access plus 1 week 表示將緩存過期設置爲訪問時間（即當前時間）之後的一週。如果將 access 替換爲 modification，則緩存過期會被設定爲文件修改時間之後的一週。
可以使用的時間單位包括：

years
months
weeks
days
hours
minutes
seconds

不同的時間也可以進行組合

ExpiresByType text/html "access plus 1 month 15 days 2 hours"
ExpiresByType image/gif "modification plus 5 hours 3 minutes"

根據文件擴展名進行設置

如果希望根據擴展名來指定緩存規則，可以使用 FilesMatch 配合正則表達式。爲了簡潔，我這裏只規定了 ExpiresDefault。它的優先級很低，只會在對應文件沒有任何其他規則能夠匹配（包括上層目錄下的緩存規則）時生效。

<IfModule mod_expires.c>
    <FilesMatch "\.(css|js)$">
        ExpiresActive on
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
</IfModule>

對某些文件設定

<IfModule mod_expires.c>
    <FilesMatch "^(example\.css|example\.js)$">
        ExpiresActive on
        ExpiresDefault "access plus 1 week"
    </FilesMatch>
</IfModule>

對某一文件夾下的所有文件設定

對於靜態文件，一個比較方便的做法是將它們全部放到一個目錄下，並對該目錄下的所有文件設定。但是，此處需要注意防止其他規則將 ExpiresDefault 覆蓋掉。

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
</IfModule>
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/lajDFcvjuWhrn0V8BpVTsg

猜你喜歡