整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文對(duì)強(qiáng)緩存和弱緩存進(jìn)行講解：
為了展示強(qiáng)緩存和弱緩存
第一步：Ctrl + shift + delete將緩存給清除
將瀏覽器的數(shù)據(jù)給清空一下
這里的數(shù)據(jù)大小是83.4kB
在響應(yīng)頭里面，會(huì)存在著ETag和Last-Modified資料
第一請(qǐng)求和第二請(qǐng)求，這里多了一個(gè)If-Modified，在弱緩存當(dāng)中，從緩存中獲取數(shù)據(jù)，檢驗(yàn)匹配是經(jīng)過多次匹配，出現(xiàn)304指令，
200或者304指令意味著沒有發(fā)生變化
如果是強(qiáng)緩存這里根本不會(huì)產(chǎn)生數(shù)據(jù)，強(qiáng)緩存的特性是存儲(chǔ)在用戶的本地
瀏覽器緩存相關(guān)指令
expires指令
expires:該指令用來控制頁(yè)面緩存的作用。可以通過該指令控制HTTP應(yīng) 答中的“Expires"和”Cache-Control"
expires 有兩種語法，一種是time，time是時(shí)間值，它默認(rèn)是以秒來計(jì)數(shù)的
no-cache，無論緩存有沒有過期，都需要發(fā)送請(qǐng)求，檢驗(yàn)緩存有沒有過期
max-age與expires的意思差不多，只不過有的沒有這個(gè)配置，
epoch會(huì)指定1970的時(shí)間，max是2037年的時(shí)間
具體配置流程:
vim ngnix.conf
為了方便對(duì)比，先將請(qǐng)求頭信息進(jìn)行復(fù)制
之后在conf配置文件下配置
location ~ .*\.(html|js|css|png) $ {
}
以html和js和css等結(jié)尾的資源，都走這個(gè)
寫成expiress 1000；的意思是緩存1000s
檢驗(yàn)語法，重新加載
重新對(duì)jQuery.js中進(jìn)行查看
現(xiàn)在相應(yīng)頭多了一塊時(shí)間max-age=1000秒和Expires:Mon.27(Expires的意思是服務(wù)器的時(shí)間)
如果將配置expiress修改為-1000，改為了負(fù)數(shù)，在請(qǐng)求頭中出現(xiàn)了no-cache
如果將該值指定為max
它會(huì)出現(xiàn)一些時(shí)間，默認(rèn)是以秒來分割的
這個(gè)max的值是10年的意思，意思是最大的緩存時(shí)間可以已達(dá)到10年
add_header指令
add_header指令是用來添加指定的響應(yīng)頭和響應(yīng)值。
語法 add_header name value [always];
位置存儲(chǔ)在http、server、location..
如果想要到web服務(wù)器直接獲取，不緩存，用no-store
不緩存的寫法配置，在配置文件中添加add_header Cache-Control no-store
現(xiàn)在就實(shí)現(xiàn)了弱緩存，第一次訪問了304kb數(shù)據(jù)，第二次就是83.5kb，實(shí)現(xiàn)了弱緩存了
學(xué)Web前端要會(huì)哪些技能？瀏覽器緩存是怎么回事？緩存是現(xiàn)在系統(tǒng)中必不可少的模塊，是高并發(fā)高性能架構(gòu)的一個(gè)關(guān)鍵組件。緩存適用于對(duì)數(shù)據(jù)實(shí)時(shí)性要求不高以及對(duì)性能要求高的場(chǎng)景中，可以有效地提升性能，緩解數(shù)據(jù)壓力。對(duì)于Web前端開發(fā)者來說，主要跟瀏覽器中的緩存打交道，接下來小編就給大家講解一下瀏覽器緩存機(jī)制。
什么是瀏覽器緩存?
瀏覽器緩存機(jī)制，其實(shí)主要就是HTTP協(xié)議定義的緩存機(jī)制(如：Expires、Cache-control等)。但是也有非HTTP協(xié)議定義的緩存機(jī)制，如使用HTML Meta標(biāo)簽，Web開發(fā)者可以在HTML頁(yè)面的節(jié)點(diǎn)中加入標(biāo)簽，代碼如下：
上述代碼的作用是告訴瀏覽器當(dāng)前頁(yè)面不被緩存，每次訪問都需要去服務(wù)器拉取。使用上很簡(jiǎn)單，但只有部分瀏覽器可以支持，而且所有緩存代理服務(wù)器都不支持，因?yàn)榇聿唤馕鯤TML內(nèi)容本身，而廣泛應(yīng)用的還是HTTP頭信息來控制緩存。
瀏覽器對(duì)于所請(qǐng)求資源的緩存處理有一套完整的機(jī)制，主要包含三個(gè)策略：存儲(chǔ)策略、過期策略、協(xié)商策略。存儲(chǔ)策略發(fā)生在收到請(qǐng)求響應(yīng)后，用于決定是否緩存相應(yīng)資源;過期策略發(fā)生在請(qǐng)求前，用于判斷緩存是否過期;協(xié)商策略發(fā)生在請(qǐng)求中，用于判斷緩存資源是否更新。
緩存又分為強(qiáng)緩存和弱緩存(又稱為協(xié)商緩存)。其中強(qiáng)緩存包括Expires和Cache-Control，主要是在過期策略生效時(shí)應(yīng)用的緩存。弱緩存包括Last-Modified和ETag，是在協(xié)商策略后應(yīng)用的緩存。強(qiáng)弱緩存之間的主要區(qū)別在于獲取資源時(shí)是否會(huì)發(fā)送請(qǐng)求。
瀏覽器下訪問資源的方式主要有7種：
(新標(biāo)簽)地址欄回車
鏈接跳轉(zhuǎn)
前進(jìn)、后退
從收藏欄打開鏈接
(window.open)新開窗口
刷新(Command + R / F5)
強(qiáng)制刷新(Command + Shift + R / Ctrl + F5)
使用這7種方式訪問資源時(shí)，應(yīng)用緩存的策略會(huì)有一些不同。需要注意的是，除此之外，還有一種特殊情況。即在當(dāng)前地址欄，不改變內(nèi)容，直接回車，等同于刷新當(dāng)前頁(yè)。但是在當(dāng)前頁(yè)點(diǎn)擊跳轉(zhuǎn)到自身，和鏈接跳轉(zhuǎn)一致，并不會(huì)等同于刷新。
如果想學(xué)習(xí)Web前端技術(shù)，一定要多了解一些行情。如果你沒有什么基礎(chǔ)，可以選擇專業(yè)的專業(yè)，深入學(xué)校好好考察，才能更客觀地了解其中的實(shí)質(zhì)。
態(tài)資源上線問題。
有學(xué)員出去面試，面試官問了一個(gè)問題：如果你真的沒有做過前端的資源的上線發(fā)布，還真的不好回答。
正常前端要上線的時(shí)候，打完包之后會(huì)生成一個(gè)dist的文件夾，dist文件夾里面會(huì)扔到服務(wù)器上。這時(shí)候上完線之后，比如去請(qǐng)求頁(yè)面的時(shí)候，基本上有js，對(duì)于用戶來說，這時(shí)候有新的東西要更新。
可以看一下，有些資源是走的緩存的，比如js資源，包括圖片資源，看走的緩存。所以對(duì)用戶來說，如果不去強(qiáng)制刷新頁(yè)面，不清緩存，訪問其實(shí)還是舊的業(yè)務(wù)邏輯。
打完包之后會(huì)有一個(gè)index.html，但是這里面的東西通常index.html文件本身很少去做緩存的，所以它里面index.html去上線，上完線之后放到靜態(tài)服務(wù)器上，就是它。上完之后，這里面外鏈的js是這個(gè)版本的。
比如這次更新完了之后要上線，有可能js變了，后綴名也變了，這時(shí)候要去上線。要去上線之后，用戶訪問網(wǎng)頁(yè)的時(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)求最新的。像首頁(yè)沒有緩存，每次刷新頁(yè)面都是請(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í)候去刷新頁(yè)面，有可能訪問的是舊的，一般都設(shè)置緩存時(shí)間的，index.html可能緩存?zhèn)€30天。
如果面試官在問你的時(shí)候，可以以這種方式給面試官聊。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
