摘要:而緩存就是為了解決用戶請(qǐng)求速度與釋放服務(wù)器壓力而生的。瀏覽器緩存則是另外的如個(gè)人見解。緩存的判斷規(guī)則過期機(jī)制過期機(jī)制就是瀏覽器根據(jù)緩存的有效期進(jìn)行判斷,如果在有效期內(nèi)就使用緩存,否則就拋棄這個(gè)緩存。否則會(huì)進(jìn)入其他緩存依據(jù)判斷。
[TOC]
簡介用戶獲取網(wǎng)絡(luò)資源,需要通過非常長的網(wǎng)絡(luò)去服務(wù)器上請(qǐng)求資源,另外服務(wù)端為了應(yīng)對(duì)大量的用戶請(qǐng)求而不斷的提升硬件性能與帶寬。這對(duì)用戶與服務(wù)端都非常的不友好。而緩存就是為了解決用戶請(qǐng)求速度與釋放服務(wù)器壓力而生的。
為什么我會(huì)寫Http緩存,因?yàn)橄旅娼榻B的緩存都是通過Http定義的。瀏覽器緩存則是另外的如:SessionStorage,LocalStorage(個(gè)人見解)。
緩存的判斷規(guī)則 1. 過期機(jī)制過期機(jī)制就是瀏覽器根據(jù)緩存的有效期進(jìn)行判斷,如果在有效期內(nèi)就使用緩存,否則就拋棄這個(gè)緩存。
一個(gè)緩存副本必須滿足以下條件,瀏覽器會(huì)認(rèn)為它是有效的,足夠新的:
1. 含有完整的過期時(shí)間控制頭信息(HTTP協(xié)議報(bào)頭),并且仍在有效期內(nèi);
2. 瀏覽器已經(jīng)使用過這個(gè)緩存副本,并且在一個(gè)會(huì)話中已經(jīng)檢查過新鮮度;
2. 驗(yàn)證機(jī)制瀏覽器帶上本地緩存副本的驗(yàn)證信息提交給服務(wù)器(Last-Modified,ETag),由服務(wù)器決定是否采用這個(gè)緩存。
客戶端請(qǐng)求的時(shí)候帶上Last-Modified,服務(wù)器進(jìn)行驗(yàn)證返回If-Modified-Since來確定資源是否是有效緩存。
另外在控制頭信息帶上這個(gè)資源的實(shí)體標(biāo)簽Etag(Entity Tag),它可以用來作為瀏覽器再次請(qǐng)求過程的校驗(yàn)標(biāo)識(shí)。如過發(fā)現(xiàn)校驗(yàn)標(biāo)識(shí)不匹配,說明資源已經(jīng)被修改或過期,瀏覽器需求重新獲取資源內(nèi)容。
此資源是從磁盤當(dāng)中取出的,也是在已經(jīng)在之前的某個(gè)時(shí)間加載過該資源,不會(huì)請(qǐng)求服務(wù)器但是此資源不會(huì)隨著該頁面的關(guān)閉而釋放掉,因?yàn)槭谴嬖谟脖P當(dāng)中的,下次打開仍會(huì)from disk cache。
2. from memory cache字面理解是從內(nèi)存中,其實(shí)也是字面的含義,這個(gè)資源是直接從內(nèi)存中拿到的,不會(huì)請(qǐng)求服務(wù)器一般已經(jīng)加載過該資源且緩存在了內(nèi)存當(dāng)中,當(dāng)關(guān)閉該頁面時(shí),此資源就被內(nèi)存釋放掉了,再次重新打開相同頁面時(shí)不會(huì)出現(xiàn)from memory cache的情況。
3. 請(qǐng)求來源當(dāng)http狀態(tài)為200是實(shí)實(shí)在在從瀏覽器獲取的資源,當(dāng)http狀態(tài)為304時(shí)該數(shù)字是與服務(wù)端通信報(bào)文的大小,并不是該資源本身的大小,該資源是從本地獲取的。
緩存類型 強(qiáng)緩存 1. Expires服務(wù)器發(fā)送給客戶端一個(gè)UTC時(shí)間(如 expires: Thu, 19 Nov 2019 08:52:00 GMT),瀏覽器接收到了這個(gè)頭,就會(huì)為這個(gè)資源標(biāo)記一個(gè)過期時(shí)間,在下次的請(qǐng)求時(shí)候判斷未過期會(huì)直接使用這個(gè)資源緩存。來源會(huì)標(biāo)記為from disk cache。
瀏覽器在取到這個(gè)緩存資源的時(shí)候,會(huì)用客戶機(jī)的時(shí)間與之對(duì)比,如果還在有效期內(nèi),則直接使用這個(gè)緩存,不進(jìn)行網(wǎng)絡(luò)請(qǐng)求。否則會(huì)進(jìn)入其他緩存依據(jù)判斷。
而這個(gè)機(jī)制會(huì)有一個(gè)問題,就是,緩存資源是否過期依賴客戶機(jī)時(shí)間??蛻魴C(jī)可以通過修改當(dāng)前時(shí)間來使這個(gè)緩存資源失效。
2. Cache-ControlHTTP/1.1定義的 Cache-Control 頭用來區(qū)分對(duì)緩存機(jī)制的支持情況, 請(qǐng)求頭和響應(yīng)頭都支持這個(gè)屬性。通過它提供的不同的值來定義緩存策略。
示例:
Cache-Control: max-age=100
這個(gè)示例表示,這個(gè)緩存資源在本次請(qǐng)求后的100秒之后都有效。瀏覽器會(huì)直接返回from disk cache,不進(jìn)行網(wǎng)絡(luò)資源請(qǐng)求。
示例:
Cache-Control: no-cache
這個(gè)示例表示,這個(gè)緩存資源不進(jìn)行強(qiáng)緩存校驗(yàn),需要通過服務(wù)端的協(xié)商緩存判斷是否啟用。
協(xié)商緩存 1. Last-Modified,If-Modified-Since當(dāng)客戶端訪問資源時(shí),服務(wù)器會(huì)將資源最后修改時(shí)間通過 Last-Modified 標(biāo)識(shí)由服務(wù)器發(fā)往客戶端,客戶端記錄修改時(shí)間,再次請(qǐng)求本地存在的緩存資源時(shí),客戶端會(huì)通過 If-Modified-Since 頭將先前服務(wù)器端發(fā)過來的最后修改時(shí)間戳發(fā)送回去,服務(wù)器端通過這個(gè)時(shí)間戳判斷客戶端的頁面是否是最新的,如果不是最新的,則返回新的內(nèi)容,如果是最新的,則返回304告訴客戶端其本地緩存資源是最新的。
2. ETag服務(wù)器為一個(gè)資源生成一個(gè)唯一的id值,一旦資源在服務(wù)端發(fā)生了改變則會(huì)重新生成一個(gè)tag,客戶端請(qǐng)求資源時(shí),帶上了這個(gè)etag,如果不一致,服務(wù)端將會(huì)發(fā)送最新的資源給用戶,否則重定向304直接使用緩存資源。
瀏覽器緩存判斷流程 參考文章https://www.yodfz.com/detail/...
https://www.cnblogs.com/slly/...
https://blog.csdn.net/qq_3205...
https://blog.csdn.net/charlen...
https://segmentfault.com/a/11...
http://www.cnblogs.com/li0803...
https://developer.mozilla.org...
https://blog.csdn.net/alan199...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/101068.html
摘要:關(guān)于的設(shè)計(jì)模式,強(qiáng)力推薦這本書設(shè)計(jì)模式與開發(fā)實(shí)踐,來自騰訊的大牛所著。講解設(shè)計(jì)模式之前,我們先接觸一個(gè)重要的概念鴨子類型什么叫鴨子類型呢需求如果我們想聽鴨子的嘎嘎嘎叫聲情況如果有一只狗不是鴨子,它也能發(fā)出嘎嘎嘎的叫聲。 當(dāng)一個(gè)項(xiàng)目的代碼量比較多,或者多人開發(fā)的時(shí)候,就需要引入一些設(shè)計(jì)模式來讓我們更好的構(gòu)建項(xiàng)目。否則代碼就會(huì)變得亂糟糟,像一團(tuán)面條一樣了。講解設(shè)計(jì)模式比較好的書有:1、設(shè)計(jì)...
摘要:協(xié)議主要是通過請(qǐng)求頭當(dāng)中的一些字段來和服務(wù)器進(jìn)行通信,從而采用不同的緩存策略。會(huì)緩存所有的結(jié)構(gòu),但是問題在于,一些頁面開始時(shí)進(jìn)行的上報(bào)或者請(qǐng)求可能會(huì)被影響。 1.如何用一個(gè)div實(shí)現(xiàn)下圖 showImg(https://segmentfault.com/img/bVbm8Rf?w=133&h=134); css #demo{ width:120px; h...
摘要:協(xié)議主要是通過請(qǐng)求頭當(dāng)中的一些字段來和服務(wù)器進(jìn)行通信,從而采用不同的緩存策略。會(huì)緩存所有的結(jié)構(gòu),但是問題在于,一些頁面開始時(shí)進(jìn)行的上報(bào)或者請(qǐng)求可能會(huì)被影響。 1.如何用一個(gè)div實(shí)現(xiàn)下圖 showImg(https://segmentfault.com/img/bVbm8Rf?w=133&h=134); css #demo{ width:120px; h...
摘要:同源策略是什么跨域通信同源兩個(gè)文檔同源需滿足協(xié)議相同域名相同端口相同跨域通信進(jìn)行操作通信時(shí)如果目標(biāo)與當(dāng)前窗口不滿足同源條件,瀏覽器為了安全會(huì)阻止跨域操作。 同源策略是什么? javascript跨域通信 同源:兩個(gè)文檔同源需滿足 協(xié)議相同 域名相同 端口相同 跨域通信:js進(jìn)行DOM操作、通信時(shí)如果目標(biāo)與當(dāng)前窗口不滿足同源條件,瀏覽器為了安全會(huì)阻止跨域操作??缬蛲ㄐ磐ǔS幸韵路椒?...
閱讀 2203·2021-11-24 10:34
閱讀 3168·2021-11-22 11:58
閱讀 3776·2021-09-28 09:35
閱讀 1791·2019-08-30 15:53
閱讀 2907·2019-08-30 14:11
閱讀 1622·2019-08-29 17:31
閱讀 618·2019-08-26 13:53
閱讀 2210·2019-08-26 13:45