、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)
清除緩存步驟1
清除緩存步驟2
vue項(xiàng)目中如何清理緩存呢?
1.在根目錄下index.html的header頭中添加一下代碼:
vue不緩存-方式1
2.配置 nginx 不緩存 html
index.html在服務(wù)器端可能是有緩存的,需要在服務(wù)器nginx上配置不讓緩存index.html
vue不緩存-方式2
名詞解釋:
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í)候,可以以這種方式給面試官聊。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。