瀏覽器快取問題Cache-Control
阿新 • • 發佈：2019-01-01
閱讀此文：你可以更好理解瀏覽器快取問題，也可以看到一個簡單的http服務與客戶端請求。
問題：
有瀏覽器快取可以方便我們載入資源，不重複請求。增強使用者體驗度。但是存在問題，當伺服器端更新資源的時候，往往會由於瀏覽器請求的是快取的資源，而導致頁面無法更新。
這個問題解決方案如下：在構建流程的時候，在實踐打包完成的檔名上，去根據他們的內容加上一串hash碼，這串hash碼是根據js\html\css內容來編碼的，他們的內容進行hash計算，如果你的js檔案或者靜態檔案其內容不變，hash碼也不會變，竟而反應到我們web就是我們的URL沒有變。而如果你的內容有變化，那你的hash碼就有變化，就會反應在你的url上。這url路徑就會有變化。有了變化後，它發起的請求就是新的求，而不是之前快取在瀏覽器中的請求。這樣就可以達到一個更新快取的目的。
server1.js
const http = require('http') const fs = require('fs'); http.createServer(function(request,response){ console.log('request come',request.url) if( request.url === '/'){ const html =fs.readFileSync('test.html','utf8') response.writeHead(200,{ 'Content-Type':'text/html' }) // 伺服器返回內容 response.end(html) } if( request.url === '/script.js'){ response.writeHead(200,{ 'Content-Type':'text/javascript', 'Cache-Control':'max-age=20' }) // 伺服器返回內容 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
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> Hello World jajajpfajfpajfpa </body> </html> <script src="/script.js"></script>
怎麼檢視Cache-Control
在你要訪問的服務端頁面上設定 ‘Cache-Control’:‘max-age=20’ 這個配置，這樣再次重新整理頁面的時候，就會得到之前快取過後的資料。直接在瀏覽器本地裡面讀取，就不需要去伺服器請求。就沒有網路延遲的操作。可以在NetWork裡面看到Headers有個Cashe-Control:max-age=20；注意一定要Disable cache勾掉。允許快取。size:(from memory cache);Time:0ms;
