WEB緩存探究

chaosx110 發布于2019-08-01 17:14 / 2351人閱讀

摘要：為了提升網站性能，有效利用緩存能夠提升用戶體驗，提高訪問效率。同時不要忘記給文件名加上指紋，以便及時更新改動同樣設置為年后到期，但標記為，因為它可能會包含某些用戶私人數據，這是不應緩存的。圖像緩存時不包含版本或唯一指紋，并設置為天后到期。

前言

由于項目越來越大，即使了使用代碼壓縮工具減少文件大小，js文件還是不可避免的越變越大。
而對于用戶來說每次重新下載都有可能會消耗大量時間，讓我們的首屏展示有較長時間的空白。
為了提升網站性能，有效利用緩存能夠提升用戶體驗，提高訪問效率。

瀏覽器緩存 HTML中的Meta標簽

http-equiv屬性，相當于http的文件頭中的參數，而content的內容則是對應參數的值

然而設置pragma: no-cache并不能應用于HTTP1.1及以上規范，
而且因為這個方法太老了，如果你不需要估計那些史前客戶的感受，完全可以不加?

當然可以不用太方，還有其他的參數可以選擇使用

但是使用meta標簽設置的參數優先級低于http請求中聲明的，如果你同時設置了http頭，那么就沒有必要加上meta標簽了。

當然，最后還有一個重要的一點，就是根據叉燒包的實驗，meta制定這些內容可以說基本沒有什么卵用:)
悲傷的故事……當然可能你的瀏覽器還可以用哦

Header參數

最保險的顯然是配置Header參數來保證資源的緩存

Cache-Control
Cache-Control 標頭是在 HTTP/1.1 規范中定義的，取代了之前用來定義響應緩存策略的標頭例如 Expires。
所有現代瀏覽器都支持 Cache-Control。

max-age 指從請求的時間開始，允許緩存有效的最長時間(單位是s)

public 可被任何對象緩存。它不是必須的，因為明確的緩存信息已表示響應是可以緩存的

private 通常只為單個用戶緩存，不允許任何中間緩存對其進行緩存

no-cache 表示必須先與服務器確認返回的響應是否發生了變化

no-store 禁止瀏覽器以及所有中間緩存存儲任何版本的返回響應，每次請求必須重新下載

借用谷歌爸爸的一張圖來展示一下Cache-Control的選擇策略

Expires
它代表一個緩存過期的絕對時間，在HTTP/1.0中實現，在HTTP/1.1中優先級低于Cache-Control。

它的缺點就是如果服務器與客戶端誤差較大，那么它的誤差也會變大

Last-Modified
標記的是資源的最后修改時間，需要配合Cache-Control使用。只能精確到秒級，如果某些文件在1秒內修改多次，則無法及時更新

ETag
相當于驗證令牌。通過它可以可實現高效的資源更新檢查：資源未發生變化時不會傳送任何數據。

ETag通常是服務器生成的文件內容的哈希值或某個其他指紋。如果請求時指紋仍然相同，則表示資源未發生變化，則可跳過下載。

參數棄用小指南

如果你不考慮ie6和HTTP 1.0客戶端，那么你可以無視Pragma

Cache-Control: no-store, must-revalidate
Expires: 0

如果你也不打算管HTTP 1.0代理，那么你可以無視Expires

Cache-Control: no-store, must-revalidate

如果服務器自動包含有效的Date標頭，則理論上也可以省略Cache-Control，并僅依賴于Expires。不過如果客戶端和服務端時間有差別，就可能會失敗哦

Date: Wed, 24 Aug 2016 18:32:02 GMT
Expires: 0

總的來說還是使用Cache-Control最妥妥的(如果不打算考慮HTTP 1.0)

項目實踐 更新文件&棄用緩存

在項目中，當我們使用本地緩存后又會遇到另一個問題——如何更新文件、棄用緩存。
通常，我們通過對文件名加入指紋來實現。

以webpack為例，
寫配置文件時

{
    output: {
        filename: "bundle.[hash].js"
    }
}

為打包后的文件名加上hash，使文件更新之后會生成新的hash，以達到棄用原來緩存的效果。

定制緩存策略

可以為不同類型的文件定義不同的緩存策略，以達到最高效的結果

將HTML被標記為“no-cache”，使瀏覽器在每次請求時都始終會重新驗證文檔，并在內容變化時能夠及時獲取最新版本，即使下載新資源。

允許瀏覽器和中間緩存（如CDN）緩存CSS，并將CSS設置為1年后到期，超長的緩存時間可以讓用戶避免每次都從服務端獲取響應。同時不要忘記給文件名加上指紋，以便及時更新改動

JavaScript同樣設置為1年后到期，但標記為private，因為它可能會包含某些用戶私人數據，這是CDN不應緩存的。

圖像緩存時不包含版本或唯一指紋，并設置為1天后到期。

其他技巧

減少對Cookie的依賴，因為每次HTTP請求都會帶上Cookie，這回增大傳輸流量（當然將靜態資源掛載在其他域名下，也可以達到cookie free的效果）

GPU云服務器云服務器探究 web緩存 web 緩存服務器 web服務器緩存

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51043.html

WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

linkin 2019-08-06 13:24 評論0 收藏0
WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

孫淑建 2019-07-25 13:59 評論0 收藏0
WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

waltr 2019-08-20 18:20 評論0 收藏0
WEB緩存探究第二彈——實戰

摘要：前言緩存探究第一彈中我們講了一些緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。在緩存探究第一彈定制緩存策略中已經提到對于最好標記為不緩存，以便及時獲取最新的靜態資源版本。前言 WEB緩存探究第一彈中我們講了一些WEB緩存的基礎知識和策略。第二彈我們來講講如何實際在項目中配置。實戰鑒于叉燒包本包是個前端，所以我們就以HTML和Node為例開始showImg(https...

jcc 2019-08-01 17:14 評論0 收藏0
WEB緩存探究

摘要：為了提升網站性能，有效利用緩存能夠提升用戶體驗，提高訪問效率。同時不要忘記給文件名加上指紋，以便及時更新改動同樣設置為年后到期，但標記為，因為它可能會包含某些用戶私人數據，這是不應緩存的。圖像緩存時不包含版本或唯一指紋，并設置為天后到期。前言由于項目越來越大，即使了使用代碼壓縮工具減少文件大小，js文件還是不可避免的越變越大。而對于用戶來說每次重新下載都有可能會消耗大量時間，讓我們...

dongxiawu 2019-08-06 13:24 評論0 收藏0
WEB緩存探究

摘要：為了提升網站性能，有效利用緩存能夠提升用戶體驗，提高訪問效率。同時不要忘記給文件名加上指紋，以便及時更新改動同樣設置為年后到期，但標記為，因為它可能會包含某些用戶私人數據，這是不應緩存的。圖像緩存時不包含版本或唯一指紋，并設置為天后到期。前言由于項目越來越大，即使了使用代碼壓縮工具減少文件大小，js文件還是不可避免的越變越大。而對于用戶來說每次重新下載都有可能會消耗大量時間，讓我們...

Simon_Zhou 2019-08-20 18:20 評論0 收藏0