為什么/何時需要在瀏覽器中硬刷新網頁？

Question

背景

雖然有很多關於HOW的博客、stackoverflow 問題和答案，但我沒有找到WHY / WHEN的任何痕跡。 公平地說，大多數人都知道為什么，但不是所有人。

場景

• 您一直在訪問同一個站點。
• 您是一名測試人員，您的開發團隊發布了 web 應用程序的新版本。
• 您是一名企業家，您發布了 web 應用程序的新版本。 您正在瀏覽器上加載的 web url 發生以下情況之一：
• web 應用程序根本不加載。
• web 應用程序突然開始表現不一致。
• 加載頁面時出現新的隨機錯誤。

比喻

雖然上面提到的這些問題背后可能有很多原因，例如軟件錯誤，或瀏覽器與新組件不兼容等。在您 go 並執行所有相關操作以調試或解決那些最簡單和最快的操作之前決議是： “硬頁刷新” ！

但為什么？ （見下文）

Answer 1

簡答

瀏覽器緩存 CSS、JS 和其他文件以改善 Web 應用程序及其相關頁面的加載時間。 取決於網站是如何實現的，當新版本的 JS、CSS 添加以及與舊版本文件的形狀和形式不同時。 頁面的新部分正在調用緩存在瀏覽器中的舊版本文件或與之交互。 這導致不一致的行為。

長答案

在過去的 Web 應用程序開發中，頁面有更小的 JavaScript 和 CSS 文件，如果它們足夠酷，可以超越基本的 HTML 頁面。 頁面也存儲在單獨的 HTML 文件中。 當您單擊新鏈接時，瀏覽器將加載一個全新的頁面應用程序。

在現代 Web 應用程序中，轉向單頁應用程序。 在這些應用程序中，您有一個負責加載內容的頁面。 所有現代網站（例如 Facebook、Netflix 等）都是使用新技術構建的。

在單頁應用程序中，同一頁面附有大型 JS 和 CSS 文件。 這意味着盡管我們的互聯網速度有了很大的提高，但每次用戶刷新時瀏覽器加載整個單頁及其所有 JS、CSS、IMG 文件的效率將很低。 通過緩存這些文件意味着瀏覽器現在只需要在頁面上加載新的數據內容。 這會帶來更好的用戶體驗。

這樣做的缺點是當一個新的 JS 或 CSS 文件發布時，瀏覽器仍在使用舊的 JS 或 CSS 文件。 它會以不可預測的方式影響業務邏輯或布局。 這就是為什么瀏覽器引入了HARD PAGE REFRESH選項以允許強制從后端服務器而不是緩存加載單頁應用程序的負載。

如果您對此主題感興趣，您可以進一步閱讀有關如何設置單頁應用程序的最佳實踐，以確保每次發布新的 JS 或 CSS 甚至圖像時，都可以保證瀏覽器重新加載內容並且不使用緩存資產。

Answer 2

我希望這對你有幫助

   <script type="text/javascript" language="javascript">
    var versionUpdate = (new Date()).getTime();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "/js/file_js.js?v=" + versionUpdate;
    document.body.appendChild(script);
  </script>