【HTML】清緩存的目的是什麼,如何實現?

緩存及優點

瀏覽器的緩存可以臨時存儲一些文件,因此當頁面切換或者再次加載相同頁面時就不需要去重新下載這些文件。服務端可以設置頭部告訴瀏覽器在一定時間內存儲這些文件。這樣不僅可以大幅度加快網站的速度還可以節省你的帶寬。

緩存帶來的問題

然而當開發者對站點進行修改時就可能會帶來一些問題:某些用戶可能仍在訪問那些修改之前的文件。這樣就會導致那些用戶使用以前的功能或者訪問一個壞了的站點(當服務端渲染的頁面元素被刪除、移動或重命名後,那些被緩存的 CSS 和 JavaScript 文件對這些元素的操作就會出現錯誤)

解決方案

解決緩存的關鍵就是強制讓瀏覽器下載最新的文件。這只需要給那些舊的文件一個新的名字,或者修改服務端的頭部。

比較簡單常用的技術就是在文件結尾添加一個查詢字符串,使其強制讓瀏覽器重新下載新的文件。如下所示:

src="js/script.js"
src="js/script.js?v=2"
擴展
  • 服務端頭部相關設置爲 ETag
  • Service Workers 及 Cache Storage
  • 網站的速度很大程度上會影響 SEO 評分
  • 緩存和命名被譽爲編程屆的兩大難題
  • 使用 webpack 相關的項目在框架層面上已經比較完美的自動解決此問題
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章