前端瀏覽器緩存怎么使用

200 from memory cache 不訪問(wèn)服務(wù)器，直接讀緩存，從內(nèi)存中讀取緩存。此時(shí)的數(shù)據(jù)時(shí)緩存到內(nèi)存中的，當(dāng)kill進(jìn)程后，也就是瀏覽器關(guān)閉以后，數(shù)據(jù)將不存在。但是這種方式只能緩存派生資源

200 from disk cache 不訪問(wèn)服務(wù)器，直接讀緩存，從磁盤中讀取緩存，當(dāng)kill進(jìn)程時(shí)，數(shù)據(jù)還是存在。這種方式也只能緩存派生資源

304 Not Modified 訪問(wèn)服務(wù)器，發(fā)現(xiàn)數(shù)據(jù)沒(méi)有更新，服務(wù)器返回此狀態(tài)碼。然后從緩存中讀取數(shù)據(jù)。

三級(jí)緩存原理

先去內(nèi)存看，如果有，直接加載

如果內(nèi)存沒(méi)有，擇取硬盤獲取，如果有直接加載

如果硬盤也沒(méi)有，那么就進(jìn)行網(wǎng)絡(luò)請(qǐng)求

加載到的資源緩存到硬盤和內(nèi)存

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

訪問(wèn)-> 200 -> 退出瀏覽器

再進(jìn)來(lái)-> 200(from disk cache) -> 刷新 -> 200(from memory cache)

application cache和上面緩存有點(diǎn)區(qū)別，是離線緩存，就是資源可以從硬盤上讀取而不用聯(lián)網(wǎng)，即使斷網(wǎng)，用戶也可以瀏覽。

設(shè)置瀏覽器緩存

304是協(xié)商緩存還是要和服務(wù)器通信一次，要想斷絕服務(wù)器通信，就要強(qiáng)制瀏覽器使用本地緩存（cache-control/expires），

一般有如下幾種方式設(shè)置瀏覽器緩存。

1、通過(guò)HTTP的META設(shè)置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)" />

這樣寫的話僅對(duì)該網(wǎng)頁(yè)有效，對(duì)網(wǎng)頁(yè)中的圖片或其他請(qǐng)求無(wú)效。

2、apache服務(wù)器配置圖片，css，js，flash的緩存

這個(gè)主要通過(guò)服務(wù)器的配置來(lái)實(shí)現(xiàn)這個(gè)技術(shù)，如果使用apache服務(wù)器的話，可以使用mod_expires模塊來(lái)實(shí)現(xiàn)：

編譯mod_expires模塊：

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

先打開(kāi)httpd.conf文件，然后查找expires這個(gè)模塊，找到后，刪除左邊的#號(hào)，表示打這個(gè)模塊，并重啟apache服務(wù)器

編輯httpd.conf配置：添加下面內(nèi)容

<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等設(shè)置

<?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");

緩存情況下前端代碼部署

問(wèn)題一：有了緩存，如何進(jìn)行前端代碼更新呢？

我們可以在資源文件或者圖片后面添加版本號(hào)，如下圖。

問(wèn)題二：但是所有文件都加了版本號(hào)之后，我們只更改了一個(gè)文件，其他文件的緩存不是浪費(fèi)了嗎？

解決這個(gè)問(wèn)題，我們可以用 數(shù)據(jù)摘要要算法，對(duì)文件求摘要信息，摘要信息與文件內(nèi)容一一對(duì)應(yīng)。如下圖：

這樣就解決了這個(gè)問(wèn)題。

問(wèn)題三：新的問(wèn)題又來(lái)了，文件發(fā)布怎么辦？

1、先部署頁(yè)面，再部署資源：在二者部署的時(shí)間間隔內(nèi)，如果有用戶訪問(wèn)頁(yè)面，就會(huì)在新的頁(yè)面結(jié)構(gòu)中加載舊的資源，并且把這個(gè)舊版本的資源當(dāng)做新版本緩存起來(lái)，其結(jié)果就是：用戶訪問(wèn)到了一個(gè)樣式錯(cuò)亂的頁(yè)面，除非手動(dòng)刷新，否則在資源緩存過(guò)期之前，頁(yè)面會(huì)一直執(zhí)行錯(cuò)誤。

2、先部署資源，再部署頁(yè)面：在部署時(shí)間間隔之內(nèi)，有舊版本資源本地緩存的用戶訪問(wèn)網(wǎng)站，由于請(qǐng)求的頁(yè)面是舊版本的，資源引用沒(méi)有改變，瀏覽器將直接使用本地緩存，這種情況下頁(yè)面展現(xiàn)正常；但沒(méi)有本地緩存或者緩存過(guò)期的用戶訪問(wèn)網(wǎng)站，就會(huì)出現(xiàn)舊版本頁(yè)面加載新版本資源的情況，導(dǎo)致頁(yè)面執(zhí)行錯(cuò)誤，但當(dāng)頁(yè)面完成部署，這部分用戶再次訪問(wèn)頁(yè)面又會(huì)恢復(fù)正常了。

好的，上面一坨分析想說(shuō)的就是：先部署誰(shuí)都不成！都會(huì)導(dǎo)致部署過(guò)程中發(fā)生頁(yè)面錯(cuò)亂的問(wèn)題。所以，訪問(wèn)量不大的項(xiàng)目，可以讓研發(fā)同學(xué)苦逼一把，等到半夜偷偷上線，先上靜態(tài)資源，再部署頁(yè)面，看起來(lái)問(wèn)題少一些。

如何解決這些問(wèn)題呢？

這個(gè)問(wèn)題，起源于資源的 覆蓋式發(fā)布，用 待發(fā)布資源 覆蓋 已發(fā)布資源，就有這種問(wèn)題。解決它也好辦，就是實(shí)現(xiàn) 非覆蓋式發(fā)布

關(guān)于緩存的方方面面就這么多了，更多精彩請(qǐng)關(guān)注Gxl網(wǎng)其它相關(guān)文章！

相關(guān)閱讀：

HTML怎么實(shí)現(xiàn)數(shù)字焦點(diǎn)圖輪播代碼

HTML里的最后一行文字顯示不全怎么處理

怎樣用canvas做出粒子噴泉?jiǎng)赢嫷男Ч?/p>

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com