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