好程式設計師web前端教程分享瀏覽器快取機制

2021-10-02 18:20:33 字數 1866 閱讀 1750

web快取是指乙個web資源(如html頁面、、js、資料等)存在於web伺服器和客戶端(瀏覽器)之間的副本。乙個優秀的快取策略可以縮短網頁請求資源的距離,減少延遲,並且由於快取檔案可以重複利用,還可以減少頻寬,降低網路負荷。但如何理解瀏覽器快取呢?接下來就給大家簡單介紹一下。

web快取有什麼作用?

減少網路頻寬消耗。無論對於**運營者或者使用者,頻寬都代表著金錢,過多的頻寬消耗,只會便宜了網路運營商。當web快取副本被使用時,只會產生極小的網路流量,可以有效的降低運營成本。

降低伺服器壓力。給網路資源設定有效期之後,使用者可以重複使用本地的快取,減少對源伺服器的請求,間接降低伺服器的壓力。同時,搜尋引擎的爬蟲機械人也能根據過期機制降低爬取的頻率,也能有效降低伺服器的壓力。

減少網路延遲,加快頁面開啟速度。頻寬對於個人**運營者來說是十分重要,而對於大型的網際網路公司來說,可能有時因為錢多而真的不在乎。那web快取還有作用嗎?答案是肯定的,對於終端使用者,快取的使用能夠明顯加快頁面開啟速度,達到更好的體驗。

瀏覽器端的快取規則

對於瀏覽器端的快取來講,這些規則是在http協議頭和html頁面的meta標籤中定義的。他們分別從新鮮度和校驗值兩個維度來規定瀏覽器是直接使用快取中的副本,還是需要去源伺服器獲取更新的版本。

1)新鮮度(過期機制):也就是快取副本有效期。乙個快取副本必須滿足以下任一條件,瀏覽器會認為它是有效的,足夠新的,而直接從快取中獲取副本並渲染:

含有完整的過期時間控制頭資訊(http協議報頭),並且仍在有效期內;

瀏覽器已經使用過這個快取副本,並且在乙個會話中已經檢查過新鮮度。

2)校驗值(驗證機制):伺服器返回資源的時候有時在控制頭資訊帶上這個資源的實體標籤etag(entity tag),它可以用來作為瀏覽器再次請求過程的校驗標識。如過發現校驗標識不匹配,說明資源已經被修改或過期,瀏覽器需求重新獲取資源內容。

哪些請求不能被快取?

1)http資訊頭中包含cache-control:no-cache,pragma:no-cache,或cache-control:max-age=0等告訴瀏覽器不用快取的請求;

2)需要根據cookie,認證資訊等決定輸入內容的動態請求是不能被快取的;

3)經過https安全加密的請求(有人也經過測試發現,ie其實在頭部加入cache-control:max-age資訊,firefox在頭部加入cache-control:public之後,能夠對https的資源進行快取,參考《https的七個誤解》);

4)post請求無法被快取;

5)http響應頭中不包含last-modified/etag,也不包含cache-control/expires的請求無法被快取。

快取使用流程

1)本地快取階段:先在本地查詢該資源,如果有發現該資源,而且該資源還沒有過期,就使用這乙個資源,完全不會傳送http請求到伺服器;

2)協商快取階段:如果在本地快取找到對應的資源,但是不知道該資源是否過期或者已經過期,則發乙個http請求到伺服器,然後伺服器判斷這個請求,如果請求的資源在伺服器上沒有改動過,則返回304,讓瀏覽器使用本地找到的那個資源;

3)快取失敗階段:當伺服器發現請求的資源已經修改過,或者這是乙個新的請求(在本來沒有找到資源),伺服器則返回該資源的資料,並且返回200, 當然這個是指找到資源的情況下,如果伺服器上沒有這個資源,則返回404。

好程式設計師web前端教程分享Date物件

好程式設計師web前端教程分享date物件,什麼是date物件乙個內建物件date 型別使用自 utc coordinated universal time,國際協調時間 1970 年 1 月 1 日午夜 零時 開始經過的毫秒數來儲存日期。date 型別儲存的日期能夠精確到 1970 年 1 月 1...

好程式設計師web前端分享邏輯運算

一門計算機語言,程式設計的核心在於邏輯思想,當我們在編寫程式的時候,邏輯是否通順,是能否正確寫出程式的關鍵,可以說如果你掌握了邏輯,那麼你就踏入了計算機程式設計的大門。與 或 否 邏輯 與 var a 0,b 3 alert a 0 b 3 true alert a 1 b 3 false 他的 返...

好程式設計師web前端分享CSS學習 HSLA顏色模式

好程式設計師web前端分享css學習 hsla顏色模式 一 理論 1.hsla顏色模式 a.hsla在hsl基礎上增加了不透明度,值越大透明度越低 b.hsla顏色模式的瀏覽器相容性和hsl一樣,只有較新版本的主流瀏覽器才支援 2.rgba和hsla顏色模式二者可以完全相互替換 3.rgba hsl...