瀏覽器的快取機制

2021-08-14 14:18:27 字數 1429 閱讀 4906

我們這『大前端』的豈能被難倒是吧?讓我列一列,常用的有localstorage 、sessionstorage、cookie…..等等。一點兒都沒有錯,這些很常用,我們通常會用這些快取來儲存各種變數啥的。但是提個疑問,我們開啟乙個頁面,裡面載入的css檔案,js檔案,這些靜態資源呢?那他們是怎麼樣快取的?我想最常聽到的乙個答案應該是,「瀏覽器的快取機制」。噢!瀏覽器快取啊。soga…..

如果你就是老老實實敲幾個html頁面,沒有去涉及node或者其他後台,那麼和這個瀏覽器快取機制,確實和你沒有太大關係了。雖然我們可以在html利用來對瀏覽器快取進行相關設定,但只能說不提倡這麼幹,而且效果也不咋地。bb一堆現在開始進入正題。

瀏覽器快取機制可以分兩類:協商快取和強快取

1、協商快取

我們頁面看到狀態碼為304的返回,那就是協商快取。就是說客戶端還是會去請求伺服器,只是去了後發現伺服器的檔案,和前一次請求回來的是一樣的。那麼就不從伺服器拿了,就直接從瀏覽器的快取取,則返回狀態碼304。

那有人會問,你是怎麼樣知道伺服器的那個檔案和我瀏覽器(之前載入)的檔案是一樣的呢?所以這個就是協商快取的關鍵了。

last-modified是指該改檔案最後修改的時間,etag是指該檔案修改後根據內容(演算法)生成的一串類似字串。

last-modified的最小單位是秒,所以有可能發生這樣的一種情況:在一秒內對內容多次的修改,所以last-modified的精確度不夠高。last-modified和etag可以一起使用,或者分開使用。

在你首次請求資源時,伺服器的返回頭(response headers)裡面就會寫入了last-modified和etag,或者只寫其中乙個。當你再次去求改資源的時候,你的請求頭(request headers)會帶上首次請求伺服器寫入response headers裡的last-modified和etag。但是在請求頭里,他們分別叫if-modified-since和if-none-match,

所以請求的時候,帶著這哥倆去伺服器比對,如果和伺服器對應的資訊是一致的,說明該資源是沒有修改過的。直接返回304,使用協商快取。

這裡講完了瀏覽器的快取機制,那麼問題來了,在**才可以配置這些快取機制的引數呢?比如:cache-control這個的max-age的設定等。

在nginx和apache作為專業的web伺服器,都是有專門的配置檔案。

我這的專案是用到node,所以貼出express的設定方法:

希望我這純手打的文字對你有所幫助!!

瀏覽器快取機制

最近在準備優化日誌請求時遇到了一些令人疑惑的問題,比如為什麼響應頭里出現了兩個 cache control 為什麼明明設定了 no cache 卻還是發請求,為什麼多次訪問時有時請求裡帶了 etag,有時又沒有帶?等等。後來查了一些資料以及同事親自驗證,總算對這些問題有了個清晰的理解,現在整理出來以...

瀏覽器快取機制

當我們瀏覽乙個頁面發現有異常時,通常考慮的就是書不是瀏覽器做了快取呢,按ctrl f5重新請求一次就能請求到沒有快取的頁面,這個是為什麼呢。首先,ctrl f5組合鍵重新整理頁面,那麼瀏覽器會直接向目標url傳送請求,而不再使用瀏覽器快取的資料。其次,當請求到達伺服器端依然有可能出現使用伺服器端的資...

瀏覽器快取機制

瀏覽器快取機制 瀏覽器快取機制,其實主要就是 協議定義的快取機制 如 expires cache control 等 但是也有非 協議定義的快取機制,如使用 html meta 標籤,web 開發者可以在 html 頁面的節點中加入 標籤,如下 上述 的作用是告訴瀏覽器當前頁面不被快取,每次訪問都需...