這個機制還可以再了解

發布時間:2019-05-27 09:31 來源:互聯網 當前欄目:電腦基礎知識

  一,導言
  緩存可以說是優化性能優化的簡單而有效的方法。優秀的緩存策略可以減少網頁請求資源的距離,減少延遲,并減少帶寬和網絡負載,因為緩存文件可以重復使用。
  對于數據請求,它可以分為三個步驟:啟動網絡請求,后端處理和瀏覽器響應。瀏覽器緩存有助于我們在第一步和第三步中優化性能。例如,如果直接使用緩存而不啟動請求,或者如果啟動請求但存儲在后端的數據與前端一致,則無需返回數據,這會減少響應數據。
  在下面的內容中,我們將通過緩存位置,緩存策略和實際場景應用程序緩存策略來探索瀏 寶寶起名寶典覽器緩存機制。
  二,緩存位置
  緩存位置有四種類型,每種類型都有優先級。當依次搜索緩存而沒有命中時,請求網絡。
  1.服務工作者
  Service Worker是在瀏覽器后面運行的獨立線程,通??捎糜謔迪只捍?。對于Service Worker,傳輸協議必須是HTTPS。由于請求攔截涉及Service Worker,因此必須使用HTTPS協議來?;に?。 Service Worker的緩存與瀏覽器的其他內置緩存機制不同。它使我們可以自由地控制緩存哪些文件,如何匹配緩存,如何讀取緩存以及緩存是持久的。
  服務工作者的緩存功能通常分為三個步驟:首先,您需要先注冊服務工作者,然后在收聽安裝事件后緩存所需的文件。然后,當用戶下次訪問時,您可以通過攔截請求來查詢是否存在緩存。如果有緩存,您可以直接讀取緩存文件,否則您將請求數據。
  當Service Worker沒有訪問緩存時,我們需要調用fetch函數來獲取數據。也就是說,如果我們不在服務工作者命中中進行緩存,我們將根據緩存查找優先級查找數據。但無論我們是從內存緩存還是從網絡請求獲取數據,瀏覽器都會顯示我們從服務工作者那里獲得的數據。
  2.Memory Cache
  內存緩存也是內存緩存。它主要包含當前頁面中捕獲的資源,例如頁面上已下載的樣式,腳本和圖像。讀取內存中的數據肯定比磁盤快。雖然內存緩存的讀取效率很高,但緩存持久性非常短,并且會在發布進程時釋放。關閉Tab頁面后,將釋放內存緩存。因此,由于內存緩存非常高效,我們可以將數據保存在內存中嗎?
  這是不可能的。計算機中的內存必須遠小于硬盤容量。操作系統需要仔細使用內存,因此我們可以使用更少的內存。
  在我們訪問頁面后,再次刷新頁面,我們可以發現大量數據來自內存緩存。
  存儲器高速緩存中的重要高速緩存資源是預加載器相關指令(例如)下載的資源。眾所周知的預加載器相關指令已經是頁面優化的常用手段之一。它可以在請求網絡上的下一個資源時解析js/css文件。
  需要注意的是,內存緩存不關心返回資源的HTTP緩存頭Cache-Control的值。資源的匹配不僅僅與URL匹配,還與Content-Type,CORS匹配。檢查其他特征。
  3.Disk Cache
  磁盤緩存也是存儲在硬盤中的緩存。讀取速度很慢,但所有內容都可以存儲在磁盤上,在容量和存儲及時性方面優于內存緩存。
  在所有瀏覽器緩存中,磁盤緩存覆蓋率基本上是最大的。它將根據HTTP Herder中的字段確定需要緩存哪些資源,哪些資源可以在沒有請求的情況下使用,哪些資源已過期且需要重新請求。即使在跨站點的情況下,一旦硬盤緩存了相同地址的資源,它們就不會再次請求數據。大多數緩存來自磁盤緩存,并且HTTP協議頭中的緩存字段在下面更詳細地描述。
  瀏覽器會將哪些文件存入內存?哪些被扔進硬盤?
  在這一點上,互聯網上有不同的意見,但以下幾點更可靠:
  對于大文件,高概率不存儲在內存中,反之亦然。
  如果當前系統內存使用率很高,則文件優先存儲在硬盤中。
  4.Push Cache
  Push Cache是HTTP/2的內容,當上述三個緩存都沒有被命中時,它將被使用。它只存在于會話中,一旦會話結束就會被釋放,緩存時間非常短。在Chrome瀏覽器中只有大約5分鐘,并且它沒有嚴格執行HTTP標頭中的緩存指令。
  Push Cache在中國可以找到的信息量也很小,因為HTTP/2在中國不夠流行。以下是對Jake Archibald的HTTP/2推送的評論比我想的文章更難,文章中有幾個結論:可以推送和緩存所有資源,但Edge和Safari瀏覽器支持相對較差
  可以推送無緩存和無存儲的資源
  關閉連接后,將釋放推送緩存
  多個頁面可以使用相同的HTTP/2連接,并且可以使用相同的Push Cache。這主要取決于瀏覽器的實現。出于性能原因,某些瀏覽器對同一域名使用相同的HTTP連接,但使用不同的選項卡標簽。
  Push Cache中的緩存只能使用一次
  瀏覽器可以拒絕接受現有的資源推送
  您可以將資源推送到其他域名。
  如果上述四個緩存都沒有被命中,則只能請求獲取資源。
  因此,出于性能原因,大多數接口應選擇緩存策略。通常,有兩種類型的瀏覽器緩存策略:強緩存和協商緩存,緩存策略通過設置HTTP頭實現。
  三,緩存過程分析
  瀏覽器與服務器通信的方式是應答模式,即:瀏覽器發起HTTP請求 - 服務器響應請求,然后瀏覽器如何確定不應緩存資源,如何緩存它?在瀏覽器首先將請求發送到服務器并獲得請求的結果之后,請求的結果和緩存標識符存儲在瀏覽器緩存中。根據首次請求資源時返回的響應頭來確定瀏覽器的高速緩存處理。
  四,強大的緩存
  強緩存:不向服務器發送請求,直接從緩存中讀取資源,在chrome控制臺的Network選項中,可以看到請求返回的狀態代碼為200,而Size顯示來自磁盤緩存或來自內存緩存。通過設置兩個HTTP標頭可以實現強大的緩存:Expires和Cache-Control。
  過期
  緩存過期時間用于指定資源到期的時間,即服務器端的特定時間點?;瘓浠八?,Expires=max-age +請求時間,需要與Last-modified結合使用。 Expires是Web服務器響應頭字段,它告訴瀏覽器在到期時間之前直接從瀏覽器緩存中獲取數據以響應http請求,而不必再次請求它。
  2.Cache-控制
  在HTTP/1.1中,Cache-Control是最重要的規則,主要用于控制網頁緩存。例如,當Cache-Control: max-age=300時,它將在請求的正確返回時間的5分鐘內再次加載資源(瀏覽器也會記錄它),并且它將命中強緩存??梢栽誶肭笸坊螄煊ν分猩柚肅ache-Control,并且可以組合各種指令:
  無緩存:客戶端緩存內容。如果使用緩存,則需要協商它以驗證決策。表示Cache-Control的緩存控制方法不用于預身份驗證。相反,Etag或Last-Modified字段用于控制緩存。應該注意的是,名稱no-cache有點誤導。設置no-cache后,并不意味著瀏覽器不再緩存數據。僅當瀏覽器使用緩存數據時,您才需要確認數據是否仍與服務器保持一致。
  S-maxage(s):與max-age相同,僅在代理服務器(例如CDN緩存)中有效。例如,當s-maxage=60時,在這60秒內,即使更新了CDN的內容,瀏覽器也不會發出請求。 Max-age用于正?;捍?,而s-maxage用于代理緩存。 S-maxage的優先級高于max-age。如果存在s-maxage,則覆蓋max-age和Expires標頭。
  Max-stale:可以容忍的最大到期時間。 max-stale指令表示客戶端愿意接收已過期的響應。如果指定了max-stale的值,則最大容差時間是相應的秒數。如果未指定,則瀏覽器愿意接收任何年齡響應(年齡表示源站生成或確認響應的時間與當前時間之間的差異)。
  事實上,兩者之間的差異并不大。區別在于Expires是http1.0的產品,而Cache-Control是http1.1的產品。如果兩者都存在,則Cache-Control的優先級高于Expires;在某些情況下,不支持HTTP1。在.1的上下文中,Expires將是有用的。因此,Expires實際上是一種過時的產品。目前,它的存在只是一種兼容性。
  強大的緩存,以確定緩存是基于它是否超過特定時間或特定時間段,無論服務器端文件是否已更新,這可能導致加載的文件不是服務器上的最新內容那么我們怎么知道服務器端的內容呢?有沒有更新?此時我們需要使用協商緩存策略。
  五,協商緩存
  協商緩存是強制緩存過期的過程。瀏覽器攜帶緩存標識符以發起對服務器的請求。服務器根據緩存標識符確定是否使用緩存。主要有兩種情況:Operation timed out after 30001 milliseconds with 0 out of -1 bytes received3.兩者比較:
  首先,Etag在準確性方面優于Last-Modified。
  Last-Modified的時間單位是秒。如果文件在1秒內更改多次,則其Last-Modified不會反映修改,但Etag每次都會更改準確性;如果它是負載均衡的服務器,每個服務器生成的Last-Modified也可能不一致。
  其次,就性能而言,Etag不如Last-Modified。畢竟,Last-Modified只需要記錄時間,Etag需要服務器通過算法計算哈希值。
  第三,優先級,服務器檢查優先考慮Etag
  六,緩存機制
  強制緩存優先于協商緩存。如果強制緩存(Expires和Cache-Control)生效,則直接使用緩存。如果它無效,則協商緩存(Last-Modified/If-Modified-Since和Etag/If-None-Match)。協商緩存由服務器確定是否使用緩存。如果協商緩存失敗,則表示請求的緩存無效,返回200,返回資源和緩存標識,然后將其存儲在瀏覽器緩存中;如果有效,則返回304,繼續使用緩存。具體流程圖
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、