、html頁面會(huì)緩存嗎？

單純的html頁面不會(huì)緩存，htm是一種標(biāo)記語言，用來描述和標(biāo)記的，不能實(shí)現(xiàn)緩存。html里面的JavaScript代碼是當(dāng)這個(gè)html頁面加載時(shí)瀏覽器解釋執(zhí)行，也不可以實(shí)現(xiàn)數(shù)據(jù)緩存。

二、html 頁面怎么對(duì)緩存進(jìn)行設(shè)置

根據(jù)服務(wù)器系統(tǒng)環(huán)節(jié)的不同設(shè)置方法不一樣

1、在Apache環(huán)境下

可以通過在.htaccess文件中添加下面的代碼，設(shè)置圖片的HTTP緩存和有效期（需要開啟apache的headers模塊支持）：

其中max-age后面這個(gè)數(shù)字就是設(shè)置的緩存有效期（以秒為單位），比如上面的代碼設(shè)置了網(wǎng)站的圖片使用為期一年（秒）的HTTP緩存。

2、在Nginx下

可以通過修改nginx.conf配置文件，來修改緩存設(shè)置：

location~*\.(flv|gif|jpg|jpeg|png|ico|swf)${;access_logoff;break;}

注意：同樣的方法，可以給js和css文件設(shè)置緩存。

html緩存:html5 應(yīng)用程序緩存和瀏覽器緩存有什么區(qū)別

應(yīng)用程序緩存是會(huì)預(yù)加載的，保證齊全地供應(yīng)和保存。瀏覽器緩存沒有這些控制，不能作為程序緩存使用。不幸地，應(yīng)用程序緩存過於簡(jiǎn)單，導(dǎo)致效率不彰，預(yù)期將會(huì)被ServiceWorker取代。

覽器緩存究竟是什么？

瀏覽器緩存（Browser Caching）是為了加速瀏覽，瀏覽器在用戶磁盤上對(duì)請(qǐng)求過的文檔進(jìn)行存儲(chǔ)，當(dāng)訪問者再次請(qǐng)求這個(gè)頁面時(shí)，瀏覽器就可以從本地磁盤顯示文檔，這樣就可以加速頁面的閱覽。它是網(wǎng)站訪問統(tǒng)計(jì)最難解決的問題之一。為了回收重復(fù)閱覽網(wǎng)站而產(chǎn)生的資源浪費(fèi)，而產(chǎn)生的機(jī)制。緩存的方式節(jié)約了網(wǎng)絡(luò)的資源，提高了網(wǎng)絡(luò)的效率。

為什么要清理緩存呢？緩存會(huì)帶來哪些問題？

部署前端項(xiàng)目以后，你會(huì)發(fā)現(xiàn)一個(gè)問題（為什么必須刷新頁面，頁面才會(huì)更新到最新版本），其實(shí)就是因?yàn)榉?wù)器緩存的問題。緩存會(huì)導(dǎo)致你頁面樣式、圖片或腳本等未能及時(shí)更新展示。

瀏覽器自身如何清理緩存呢？

以谷歌瀏覽器為例：按照下圖指示：（也可使用快捷鍵直接喚起：Ctrl + Shift + Del）

vue項(xiàng)目中如何清理緩存呢?

1.在根目錄下index.html的header頭中添加一下代碼：

2.配置 nginx 不緩存 html

index.html在服務(wù)器端可能是有緩存的，需要在服務(wù)器nginx上配置不讓緩存index.html

名詞解釋:

no-cache：數(shù)據(jù)內(nèi)容不能被緩存, 每次請(qǐng)求都重新訪問服務(wù)器, 若有max-age（最大緩存期）, 則緩存期間不訪問服務(wù)器

no-store：不僅不能緩存, 連暫存也不可以(即: 臨時(shí)文件夾中不能暫存該資源)

以上就是我本次分享的方式，各位同仁們還有什么好的方式可以下方留言，共同學(xué)習(xí)！

---攜手共進(jìn)，一同進(jìn)階！

態(tài)資源上線問題。

有學(xué)員出去面試，面試官問了一個(gè)問題：如果你真的沒有做過前端的資源的上線發(fā)布，還真的不好回答。

正常前端要上線的時(shí)候，打完包之后會(huì)生成一個(gè)dist的文件夾，dist文件夾里面會(huì)扔到服務(wù)器上。這時(shí)候上完線之后，比如去請(qǐng)求頁面的時(shí)候，基本上有js，對(duì)于用戶來說，這時(shí)候有新的東西要更新。

可以看一下，有些資源是走的緩存的，比如js資源，包括圖片資源，看走的緩存。所以對(duì)用戶來說，如果不去強(qiáng)制刷新頁面，不清緩存，訪問其實(shí)還是舊的業(yè)務(wù)邏輯。

打完包之后會(huì)有一個(gè)index.html，但是這里面的東西通常index.html文件本身很少去做緩存的，所以它里面index.html去上線，上完線之后放到靜態(tài)服務(wù)器上，就是它。上完之后，這里面外鏈的js是這個(gè)版本的。

比如這次更新完了之后要上線，有可能js變了，后綴名也變了，這時(shí)候要去上線。要去上線之后，用戶訪問網(wǎng)頁的時(shí)候，加載的index.html里面還是舊的js文件。對(duì)于舊的js文件來說，有可能對(duì)于遠(yuǎn)端的復(fù)習(xí)上把舊的文件刪掉了，還有可能會(huì)導(dǎo)致前面出錯(cuò)，因?yàn)檎?qǐng)求不了js了。

因?yàn)樯贤昃€之后，js已經(jīng)刪掉了。這時(shí)候一般的方案就是要不就是index.html不做緩存，每次都請(qǐng)求最新的。像首頁沒有緩存，每次刷新頁面都是請(qǐng)求新的，看到?jīng)]有？但這種方式不是特別好。

這種方式怎么做？一般在index.html里面可以加上這樣的請(qǐng)求頭，加上標(biāo)簽，就是強(qiáng)制不讓它緩存。再一個(gè)就是服務(wù)是部署在nginx，在nginx里面也可以加上不讓它緩存。但是這種方法還不是最好的。

一般不管是js這種資源，還是圖片，CSS還是index.html，基本上都會(huì)做緩存的。

比如靜態(tài)資源，index.html還是圖片，都會(huì)上到cdn服務(wù)上，每一次發(fā)包的時(shí)候，它會(huì)把原來的上一個(gè)版本的靜態(tài)資源留著，也不會(huì)去刪除。像會(huì)做一個(gè)備份，根據(jù)日期做一個(gè)備份。

對(duì)于用戶來說，這個(gè)網(wǎng)站如果用戶沒有清緩存，訪問index.html，那么它里面那種東西還是舊的內(nèi)容，js文件名也是舊的，但是在這個(gè)服務(wù)器上，我給它保留備份。

如果這時(shí)候用戶清緩存，或者打包之后，index.html的過期時(shí)間已經(jīng)到了，過期時(shí)間到了，它會(huì)去請(qǐng)求新的，請(qǐng)求新的就去請(qǐng)求新的js文件，也就是在上線的時(shí)候，舊的靜態(tài)資源，比如在這個(gè)里面的js，都會(huì)做備份的。

但是這樣也有一個(gè)弊端，備份的內(nèi)容會(huì)非常多，從二零二年的到現(xiàn)在的二零二四年了，都還在備份當(dāng)中，因?yàn)椴恢烙脩羰裁磿r(shí)候去刷新頁面，有可能訪問的是舊的，一般都設(shè)置緩存時(shí)間的，index.html可能緩存?zhèn)€30天。

如果面試官在問你的時(shí)候，可以以這種方式給面試官聊。