瀏覽器刷新的三種方式


原文:https://cnodejs.org/topic/4f43614e6ade5ec0780003c3

 

我們一直在用着瀏覽器刷新,其實刷新也是有一些小學問的哦,我們常見的三種刷新:

1、url+enter或者a標簽的超鏈接點擊

2、F5刷新

3、ctrl+F5刷新

這三種刷新究竟有何不同呢?舉三個簡單的例子大家就明白了。

條件:此url路徑您已經使用瀏覽器最近訪問過,並沒有超過緩存的時間,比如您在前1分鍾剛剛訪問過此url路徑。

1、url+enter或者a標簽的超鏈接點擊

enter image description here

哇!一張我夢想座駕三菱EVO X的圖片出現了。

我們發現用firebug查看網絡請求是灰色的,后面說明此請求來自於緩存,其實此請求並沒有發送到后端node.js,而是瀏覽器直接讀取的緩存的數據。這里只需要在 response.setHeader(‘Cache-Control’, ‘public, max-age=3600’); //緩存一小時

2、F5刷新

還是那個url地址,只不過這次我輕輕的按了下F5哦~

enter image description here

EVO X還是那么帥啊,哈哈。

我們仔細看響應狀態碼,變成304了,這里瀏覽器是去請求了后端node.js服務器,同時它帶上了2個重要的參數:

1、If-Modified-Since:對應的node.js響應頭 Last-Modified

2、If-None-Match:對應的node.js響應頭 Etag

當node.js服務器收到這樣的http請求后,則去判斷是否需要更新客戶端的緩存,至於使用 Last-Modified 還是 Etag 來判斷緩存是否更新就要看您的node.js服務器代碼是怎么寫的了。

expressjs是優先判斷Etag,至於Etag的值如何獲取,也要看您使用的web服務器是怎么獲取的,可以是修改時間+文件大小的md5值或者其他。

如果node.js服務器判斷 Last-Modified 還是 Etag 后認為此請求資源還在緩存,然后返回 304狀態碼,和最新的 Last-Modified和Etag。

並且響應頭沒有“Content-Length”屬性,說明響應的body是空的,

瀏覽器收到304狀態碼以后,認為資源未被修改,所以就去取緩存響應給用戶了。

3、ctrl+F5刷新

強制刷新!

enter image description here

EVO X還是那么霸氣!雖然已經停產了!

我們可以仔細看下請求頭,沒有了第2種情況的2個緩存頭,和第一次來訪問此url地址是一樣的,所以node.js服務器就直接將圖片響應給瀏覽器了,所以這里的151.1KB是這張圖片的大小,不使用任何瀏覽器緩存。

總結發言:

三種刷新的情況相信您已經全看明白了,百分之90%的用戶是使用第一或者第二種的,所以緩存技術至關重要。對於一些不經常修改的頁面完全可以使用 Cache-Control 讓請求都不用發了,節約服務器資源,快速響應。對於一些靜態圖片等一定要加上 Last-Modified 或者 Etag,因為一般此類資源體積都比較大,緩存做好的話可以提高不少效率。

當然不論是靜態文件還是json數據或者是html數據都可以充分的利用瀏覽器緩存,只要你遵循http協議。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM