浏览器禁止缓存讲解
文章目錄
- 瀏覽器禁止緩存
- 1、什么是瀏覽器緩存？
- 2、網(wǎng)站緩存有什么用？
- 3、為什么要禁用瀏覽器緩存
- 場(chǎng)景：
- 解決方案：
- 總結(jié)：
瀏覽器禁止緩存
1、什么是瀏覽器緩存？
瀏覽器緩存（Browser Caching）是為了節(jié)約網(wǎng)絡(luò)的資源加速瀏覽，瀏覽器在用戶磁盤上對(duì)最近請(qǐng)求過(guò)的文檔進(jìn)行存儲(chǔ)，當(dāng)訪問(wèn)者再次請(qǐng)求這個(gè)頁(yè)面時(shí)，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁(yè)面的閱覽。
瀏覽器緩存主要有兩類：緩存協(xié)商：Last-modified ，Etag 和徹底緩存：cache-control，Expires。
2、網(wǎng)站緩存有什么用？
在瀏覽網(wǎng)頁(yè)過(guò)程中網(wǎng)站開(kāi)發(fā)人員為了給用戶帶來(lái)更佳的瀏覽體驗(yàn)，使網(wǎng)站加載快速高效往往會(huì)在瀏覽器本地也就是設(shè)備上面存儲(chǔ)緩存文件，因?yàn)榫W(wǎng)站或者web應(yīng)用并不是實(shí)時(shí)大量?jī)?nèi)容的更新的，而是多數(shù)內(nèi)容基本變化很小，因此在本地存儲(chǔ)一部分文件，這樣就不需要每次都重新加載全部的網(wǎng)站或者web應(yīng)用信息，節(jié)省時(shí)間、流量，帶來(lái)更佳的訪問(wèn)體驗(yàn)。
3、為什么要禁用瀏覽器緩存
在提升訪問(wèn)速度，節(jié)省流量的同時(shí)，保存緩存文件肯定會(huì)占據(jù)一定的設(shè)備存儲(chǔ)空間，因此有些人在不需要追求時(shí)間流量的節(jié)省的時(shí)候，可以選擇禁用瀏覽器緩存，這樣瀏覽器不會(huì)在設(shè)備本地保存文件節(jié)省了存儲(chǔ)空間。
場(chǎng)景：
部分項(xiàng)目在打包上線后，因?yàn)椴幌Ｍ行﹉tml緩存。但html的文件名字不會(huì)發(fā)生改變，就不會(huì)重新進(jìn)行加載，造成頁(yè)面故障
解決方案：
1.使用js向url添加隨機(jī)參數(shù)（注意：若為hash模式，則隨機(jī)參數(shù)需要放置在 # 前）
但是這樣做也有一個(gè)弊端，因?yàn)榫彺婵梢詼p少對(duì)服務(wù)器的直接訪問(wèn)，減少服務(wù)器的壓力。瀏覽器不讀取緩存里的內(nèi)容之后，每次都會(huì)訪問(wèn)服務(wù)器，這樣就會(huì)增加服務(wù)器的壓力。所以應(yīng)根據(jù)情況使用。
if (!window.name) {location.href += "?random=" + Date.now();window.name = "reloaded"; }2.在html的head中添加meta（瀏覽器仍希望緩存的話無(wú)效）
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" />3.后端設(shè)置get請(qǐng)求的response請(qǐng)求頭
response.setDateHeader("Expries", -1); response.setHeader("Cache-Control", "no-cache"); response.setHeader("Pragma", "no-cache");4.在瀏覽器中設(shè)置
F12打開(kāi)控制臺(tái)—>Network---->Disable cache 打鉤
F12—>F1—>network ----> Disable cache（while DevTools is open） 打鉤
5.更多工具選項(xiàng) 或 ctrl+shift+delete 或 ctrl+f5----> 清除瀏覽數(shù)據(jù)
總結(jié)：
想讓瀏覽器有何種行為，服務(wù)端只能通過(guò)響應(yīng)頭的方式來(lái)設(shè)置
想讓服務(wù)器知道何種行為，瀏覽器只能通過(guò)請(qǐng)求頭的方式來(lái)設(shè)置
總結(jié)
- 上一篇： 关于dev c++z中文乱码的问题
- 下一篇： 2017年html5行业报告,云适配发布