首頁 > 文章 > web前端 > 前端瀏覽器快取怎麼使用

前端瀏覽器快取怎麼使用

php中世界最好的语言原創: 2017-11-27 10:05:324011瀏覽

之前先跟大家介紹過瀏覽器的緩存，也介紹過HTML的離線緩存，說的太多反而容易弄混，今天就來給大家好好分辨一下這些緩存分別有什麼區別以及怎麼使用緩存。

200 from memory cache 不存取伺服器，直接讀取緩存，從記憶體讀取快取。此時的資料時緩存到記憶體中的，當kill進程後，也就是瀏覽器關閉以後，資料將不存在。但這種方式只能快取派生資源

200 from disk cache 不存取伺服器，直接讀取緩存，從磁碟讀取緩存，當kill進程時，資料還是存在。這種方式也只能快取派生資源

304 Not Modified 存取伺服器，發現資料沒有更新，伺服器傳回此狀態碼。然後從快取中讀取資料。

三級快取原理

先去記憶體看，如果有，直接載入

如果記憶體沒有，擇取硬碟獲取，如果有直接載入

如果硬碟也沒有，那麼就進行網路請求

載入到的資源快取到硬碟和記憶體

一般瀏覽圖片，如下流程：

訪問-> 200 -> 退出瀏覽器

再進來-> 200(from disk cache) -> 刷新-> 200(from memory cache)

application cache和上面快取有點差別，是離線緩存，就是資源可以從硬碟上讀取而不用連網，即使斷網，用戶也可以瀏覽。

設定瀏覽器快取

304是協商快取還是要和伺服器通訊一次，要斷絕伺服器通信，就要強制瀏覽器使用本地快取（cache-control/expires），

一般有以下幾種方式設定瀏覽器快取。

1、透過HTTP的META設定expires和cache-control

<meta http-equiv="Cache-Control" content="max-age=7200" />
 <meta http-equiv="Expires" content="Sun Oct 15 2017 20:39:53 GMT+0800 (CST)" />

這樣寫的話僅對該網頁有效，對網頁中的圖片或其他要求無效。

2、apache伺服器設定圖片，css，js，flash的快取

這個主要透過伺服器的設定來實現這個技術，如果使用apache伺服器的話，可以使用mod_expires模組來實現：

編譯mod_expires模組：

Cd  /root/httpd-2.2.3/modules/metadata/usr/local/apache/bin/apxs -i -a -c mod_expires.c //编译

先開啟httpd.conf文件，然後找出expires這個模組，找到後，刪除左邊的#號，表示打這個模組，並重啟apache伺服器

編輯httpd.conf設定：新增下面內容

<IfModule mod_expires.c>ExpiresActive on
ExpiresDefault "access plus 1 month"
ExpiresByType text/html "access plus 1 months"
ExpiresByType text/css "access plus 1 months"
ExpiresByType image/gif "access plus 1 months"
ExpiresByType image/jpeg "access plus 1 months"
ExpiresByType image/jpg "access plus 1 months"
ExpiresByType image/png "access plus 1 months"
EXpiresByType application/x-shockwave-flash "access plus 1 months"
EXpiresByType application/x-javascript      "access plus 1 months"
#ExpiresByType video/x-flv "access plus 1 months"</IfModule>

3、php等設定

<?php
  header("Cache-Control: public");
  header("Pragma: cache");
  $offset = 30*60*60*24; // cache 1 month
  $ExpStr = "Expires: ".gmdate("D, d M Y H:i:s", time() + $offset)." GMT";
  header($ExpStr);?>

或

$seconds_to_cache = 3600;$ts = gmdate("D, d M Y H:i:s", time() + $seconds_to_cache) . " GMT";header("Expires: $ts"); header("Pragma: cache");header("Cache-Control: max-age=$seconds_to_cache");

快取情況下前端程式碼部署

#問題一：有了緩存，如何進行前端程式碼更新？

我們可以在資源檔案或圖片後面加上版本號，如下圖。

問題二：但是所有文件都加了版本號之後，我們只更改了一個文件，其他文件的快取不是浪費了嗎？

解決這個問題，我們可以用數據摘要要演算法，對文件求摘要信息，摘要信息與文件內容一一對應。如下圖：

這樣就解決了這個問題。

問題三：新的問題又來了，文件發佈怎麼辦？

1、先部署頁面，再部署資源：在二者部署的時間間隔內，如果有使用者存取頁面，就會在新的頁面結構中載入舊的資源，並且把這個舊版本的資源當做新版本快取起來，結果就是：使用者造訪到了一個樣式錯亂的頁面，除非手動刷新，否則在資源快取過期之前，頁面會一直執行錯誤。

2、先部署資源，再部署頁面：在部署時間間隔之內，有舊版資源本地快取的使用者造訪網站，由於請求的頁面是舊版的，資源引用沒有改變，瀏覽器將直接使用本地緩存，這種情況下頁面展現正常；但沒有本地緩存或緩存過期的用戶訪問網站，就會出現舊版本頁面加載新版本資源的情況，導致頁面執行錯誤，但當頁面完成部署，這部分使用者再次造訪頁面又會恢復正常了。

好的，上面一坨分析想說的就是：先部署誰都不成！都會導致部署過程中發生頁面錯亂的問題。所以，訪問量不大的項目，可以讓研發同學苦逼一把，等到半夜偷偷上線，先上靜態資源，再部署頁面，看起來問題少一些。

如何解決這些問題呢？

這個問題，起源於資源的覆蓋式發布，用待發布資源覆蓋已發布資源，就有這種問題。解決它也好辦，就是實現非覆蓋式發布

關於緩存的方方面面就這麼多了，更多精彩請關注php中文網其它相關文章！