瀏覽器快取問題Cache Control

閱讀此文：你可以更好理解瀏覽器快取問題，也可以看到乙個簡單的http服務與客戶端請求。

問題：有瀏覽器快取可以方便我們載入資源，不重複請求。增強使用者體驗度。但是存在問題，當伺服器端更新資源的時候，往往會由於瀏覽器請求的是快取的資源，而導致頁面無法更新。

這個問題解決方案如下：在構建流程的時候，在實踐打包完成的檔名上，去根據他們的內容加上一串hash碼，這串hash碼是根據js\html\css內容來編碼的，他們的內容進行hash計算，如果你的js檔案或者靜態檔案其內容不變，hash碼也不會變，竟而反應到我們web就是我們的url沒有變。而如果你的內容有變化，那你的hash碼就有變化，就會反應在你的url上。這url路徑就會有變化。有了變化後，它發起的請求就是新的求，而不是之前快取在瀏覽器中的請求。這樣就可以達到乙個更新快取的目的。

// 伺服器返回內容

response.end(html)

}if( request.url === '/script.js'))

// 伺服器返回內容

response.end('console.log("script loaded")')

}}).listen(8888)

console.log("server listening 8888")

// 2定義了以fs為協議的fs物件

// 6以utf8的方式去讀取test.html

// 返回的頭是200 文字型別是'content-type':'test/html' 來解析的

test.html

hello world jajajpfajfpajfpa

怎麼檢視cache-control

在你要訪問的服務端頁面上設定『cache-control』:『max-age=20』這個配置，這樣再次重新整理頁面的時候，就會得到之前快取過後的資料。直接在瀏覽器本地裡面讀取，就不需要去伺服器請求。就沒有網路延遲的操作。可以在network裡面看到headers有個cashe-control:max-age=20；注意一定要disable cache勾掉。允許快取。size:(from memory cache);time:0ms;

瀏覽器快取問題Cache Control

瀏覽器快取問題

瀏覽器快取 問題

ajax瀏覽器快取問題

相關推薦

瀏覽器快取問題