資訊專欄INFORMATION COLUMN
摘要：緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問請(qǐng)求，還是向源服務(wù)器再次發(fā)送請(qǐng)求。同時(shí)，搜索引擎的爬蟲機(jī)器人也能根據(jù)過期機(jī)制降低爬取的頻率，也能有效降低服務(wù)器的壓力。
論，如何定義一個(gè)前端工程師。前天看了篇文章，作者把前端攻城獅稱作是所有攻城獅角色中最具有也最需要‘工匠精神’的攻城獅。從最直觀的角度來(lái)講就是視覺方面，不僅要百分百還原設(shè)計(jì)稿（靜態(tài)以及動(dòng)態(tài)交互），還要考慮代碼是否工整、冗余、復(fù)用、性能等方面問題，而且說(shuō)得更博大一些還要培養(yǎng)點(diǎn)產(chǎn)品和設(shè)計(jì)的思維（培養(yǎng)個(gè)P啊，這是開發(fā)和他們的鴻溝，純屬扯淡。）正兒八經(jīng)的對(duì)于前端不只是會(huì)JavaScript就行了，要學(xué)的東西真是太多了，作為一名初生牛犢的我，還是相當(dāng)有必要擴(kuò)展下一個(gè)web開發(fā)要掌握的知識(shí)面，比如今天要總結(jié)的緩存機(jī)制。
Web緩存是指一個(gè)Web資源（如html頁(yè)面，圖片，js等）存在于Web服務(wù)器和客戶端（瀏覽器）之間的副本。緩存會(huì)根據(jù)進(jìn)來(lái)的請(qǐng)求保存輸出內(nèi)容的副本；當(dāng)下一個(gè)請(qǐng)求來(lái)到的時(shí)候，如果是相同的URL，緩存會(huì)根據(jù)緩存機(jī)制決定是直接使用副本響應(yīng)訪問請(qǐng)求，還是向源服務(wù)器再次發(fā)送請(qǐng)求。比較常見的就是瀏覽器會(huì)緩存訪問過網(wǎng)站的網(wǎng)頁(yè)，當(dāng)再次訪問這個(gè)URL地址的時(shí)候，如果網(wǎng)頁(yè)沒有更新，就不會(huì)再次下載網(wǎng)頁(yè)，而是直接使用本地緩存的網(wǎng)頁(yè)。只有當(dāng)網(wǎng)站明確標(biāo)識(shí)資源已經(jīng)更新，瀏覽器才會(huì)再次下載網(wǎng)頁(yè)。
減少網(wǎng)絡(luò)帶寬消耗
無(wú)論對(duì)于網(wǎng)站運(yùn)營(yíng)者或者用戶，帶寬都代表著金錢，過多的帶寬消耗，只會(huì)便宜了網(wǎng)絡(luò)運(yùn)營(yíng)商。當(dāng)Web緩存副本被使用時(shí)，只會(huì)產(chǎn)生極小的網(wǎng)絡(luò)流量，可以有效的降低運(yùn)營(yíng)成本。
降低服務(wù)器壓力
給網(wǎng)絡(luò)資源設(shè)定有效期之后，用戶可以重復(fù)使用本地的緩存，減少對(duì)源服務(wù)器的請(qǐng)求，間接降低服務(wù)器的壓力。同時(shí)，搜索引擎的爬蟲機(jī)器人也能根據(jù)過期機(jī)制降低爬取的頻率，也能有效降低服務(wù)器的壓力。
減少網(wǎng)絡(luò)延遲，提升頁(yè)面渲染速度
帶寬對(duì)于個(gè)人網(wǎng)站運(yùn)營(yíng)者來(lái)說(shuō)是十分重要，緩存的使用能夠明顯加快頁(yè)面打開速度，達(dá)到更好的體驗(yàn)。
數(shù)據(jù)庫(kù)數(shù)據(jù)緩存：為了提供查詢數(shù)據(jù)庫(kù)表的性能，一般會(huì)將查詢后的數(shù)據(jù)放到內(nèi)存中進(jìn)行緩存，以便下次使用時(shí)直接從內(nèi)存返回，提高響應(yīng)效率
服務(wù)器端緩存：a.代理服務(wù)器緩存-瀏覽器端和源服務(wù)器之間的一個(gè)中間服務(wù)器，共享緩存，同一個(gè)副本會(huì)被重用多次，為大多用戶提供服務(wù)；b. CDN緩存（Content Delivery Network, 顧名思義，內(nèi)容分發(fā)網(wǎng)絡(luò)），CDN和CDN緩存是兩個(gè)概念，切勿混淆，本篇文章談緩存。舉個(gè)例子，如果你要更新CDN上的資源，然后你把資源直接放到了CDN替換上邊的舊資源，文件名未修改（路經(jīng)以及代碼未改），這時(shí)就很有可能造成頁(yè)面讀取舊緩存的情況出現(xiàn)，而這時(shí)倘若出現(xiàn)在線上......[淚奔-.-!!]，so ! 切記替換CDN資源時(shí)加個(gè)時(shí)間戳或是設(shè)置好請(qǐng)求報(bào)頭里的參數(shù)，避免飛來(lái)橫鍋。
瀏覽器緩存：這個(gè)就是常見在瀏覽器端的緩存，常用清除方法：控制臺(tái)-Application-Clear storage-選中Cache-Clear site data，Ctrl+F5（強(qiáng)制刷新），鼠標(biāo)按住頁(yè)面刷新按鈕不放或按住滑動(dòng)，會(huì)出現(xiàn)刷新選項(xiàng)（截不了圖sad）選項(xiàng)包括：正常重新加載 Ctrl + R || 硬性重新加載 Ctrl + shift + R || 清空緩存并硬性重新加載 ，不過我發(fā)現(xiàn)并不是所有的網(wǎng)站都可以，原因可能是部分站點(diǎn)設(shè)置的緩存不同（有待研究）。
web應(yīng)用層緩存：這種緩存指的是代碼層面上，通過代碼邏輯和緩存策略實(shí)現(xiàn)對(duì)數(shù)據(jù)、頁(yè)面、圖片等資源的緩存。
本文要介紹的是瀏覽器緩存，其實(shí)就是指服務(wù)器和客戶端（瀏覽器）之間的一個(gè)副本（static sources like html/css/js）。一個(gè)完整的網(wǎng)絡(luò)請(qǐng)求大概是這樣的；
第一次請(qǐng)求： 客戶端發(fā)送請(qǐng)求 -> 本地?zé)o緩存 -> 向服務(wù)器發(fā)送請(qǐng)求 -> 返回靜態(tài)資源 -> 呈現(xiàn)（并緩存到本地）
第二次請(qǐng)求：如下圖一所示：
這里要先說(shuō)下緩存中相關(guān)的消息報(bào)頭參數(shù)，具體如圖二（標(biāo)紅處重點(diǎn)理解 ）：
現(xiàn)在講圖一中發(fā)生的第二次請(qǐng)求，此次請(qǐng)求會(huì)讀取本地的緩存副本，但首先讀取的時(shí)候?yàn)g覽器會(huì)判斷緩存的過期時(shí)間（假如設(shè)置的話），倘若沒有過期就會(huì)讀取緩存。倘若過期就會(huì)和服務(wù)器校對(duì)ETag（Entity tag用于緩存驗(yàn)證）如果ETag非空，瀏覽器就會(huì)把ETag的值給If-None-Match進(jìn)行對(duì)比，同時(shí)，也會(huì)對(duì)比Last-Modified和If-Modified-Since的值，如果相同則證明服務(wù)器沒有修改內(nèi)容，就會(huì)返回304 Not-Modified讀取本地緩存，HTTP304狀態(tài)碼是指該本地緩存資源與服務(wù)端資源相比沒有被修改過所以會(huì)直接讀取本地緩存內(nèi)容，反之重新向服務(wù)器發(fā)出請(qǐng)求并返回。此時(shí)Last-Modified和ETag的值都會(huì)被重置。
以上所述都是自己總結(jié)的一些知識(shí)，如有錯(cuò)誤還請(qǐng)指正，感謝。
感謝以下前輩的解惑，向大佬看齊【敬禮！】
http://www.alloyteam.com/2012...
https://segmentfault.com/a/11...
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/61900.html
瀏覽器緩存機(jī)制學(xué)習(xí)總結(jié) 最近在做一個(gè)考試系統(tǒng)時(shí)，由于經(jīng)常加載試卷或圖片等等靜態(tài)資源，抽空學(xué)習(xí)了一下緩存機(jī)制，在此記錄 為什么要使用緩存 1、通過HTTP協(xié)議，在客戶端和瀏覽器建立連接時(shí)需要消耗時(shí)間，而大的響應(yīng)需要在客戶端和服務(wù)器之間進(jìn)行多次往返通信才能獲得完整的響應(yīng)，這拖延了瀏覽器可以使用和處理內(nèi)容的時(shí)間。這就增加了訪問服務(wù)器的數(shù)據(jù)和資源的成本，因此利用瀏覽器的緩存機(jī)制重用以前獲取的數(shù)據(jù)就變成了性...
摘要：對(duì)于瀏覽器緩存，相信很多開發(fā)者對(duì)它真的是又愛又恨。那么瀏覽器緩存究竟是個(gè)什么樣的神奇玩意呢什么是瀏覽器緩存簡(jiǎn)單來(lái)說(shuō)，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過的資源如頁(yè)面，圖片，，數(shù)據(jù)等拷貝一份副本儲(chǔ)存在瀏覽器中。 對(duì)于瀏覽器緩存，相信很多開發(fā)者對(duì)它真的是又愛又恨。一方面極大地提升了用戶體驗(yàn)，而另一方面有時(shí)會(huì)因?yàn)樽x取了緩存而展示了錯(cuò)誤的東西，而在開發(fā)過程中千方百計(jì)地想把緩存禁掉。那么瀏覽器緩存究竟...
摘要：對(duì)于瀏覽器緩存，相信很多開發(fā)者對(duì)它真的是又愛又恨。那么瀏覽器緩存究竟是個(gè)什么樣的神奇玩意呢什么是瀏覽器緩存簡(jiǎn)單來(lái)說(shuō)，瀏覽器緩存就是把一個(gè)已經(jīng)請(qǐng)求過的資源如頁(yè)面，圖片，，數(shù)據(jù)等拷貝一份副本儲(chǔ)存在瀏覽器中。 對(duì)于瀏覽器緩存，相信很多開發(fā)者對(duì)它真的是又愛又恨。一方面極大地提升了用戶體驗(yàn)，而另一方面有時(shí)會(huì)因?yàn)樽x取了緩存而展示了錯(cuò)誤的東西，而在開發(fā)過程中千方百計(jì)地想把緩存禁掉。那么瀏覽器緩存究竟...
摘要：緩存緩存，也叫網(wǎng)關(guān)緩存反向代理緩存。瀏覽器先向網(wǎng)關(guān)發(fā)起請(qǐng)求，網(wǎng)關(guān)服務(wù)器后面對(duì)應(yīng)著一臺(tái)或多臺(tái)負(fù)載均衡源服務(wù)器，會(huì)根據(jù)它們的負(fù)載請(qǐng)求，動(dòng)態(tài)將請(qǐng)求轉(zhuǎn)發(fā)到合適的源服務(wù)器上。雖然這種架構(gòu)負(fù)載均衡源服務(wù)器之間的緩存沒法共享，但卻擁有更好的處擴(kuò)展性。 一、前言? 工作上遇到一個(gè)這樣的需求，一個(gè)H5頁(yè)面在APP端，如果勾選已讀狀態(tài)，則下次打開該鏈接，會(huì)跳過此頁(yè)面。用到了HTML5 的本地存儲(chǔ) API ...
摘要：根據(jù)標(biāo)準(zhǔn)，到目前為止，一共有種緩存機(jī)制，有些是之前已有，有些是才新加入的。首次請(qǐng)求緩存有效期內(nèi)請(qǐng)求緩存過期后請(qǐng)求一般瀏覽器會(huì)將緩存記錄及緩存文件存在本地文件夾中。 騰訊 Bugly 特約作者：賀輝超 1. H5 緩存機(jī)制介紹 H5，即 HTML5，是新一代的 HTML 標(biāo)準(zhǔn)，加入很多新的特性。離線存儲(chǔ)（也可稱為緩存機(jī)制）是其中一個(gè)非常重要的特性。H5 引入的離線存儲(chǔ)，這意味著 web ...
閱讀 3609·2023-04-26 02:55
閱讀 2878·2021-11-02 14:38
閱讀 4151·2021-10-21 09:39
閱讀 2861·2021-09-27 13:36
閱讀 3976·2021-09-22 15:08
閱讀 2662·2021-09-08 10:42
閱讀 2814·2019-08-29 12:21
閱讀 685·2019-08-29 11:22
