Why/When 是否需要在浏览器中硬刷新网页?
Why/When is it needed to hard refresh a webpage in a browser?
背景
虽然 HOW 上有很多博客、Whosebug 问题和答案,但我还没有找到 WHY[=35 的任何踪迹=]/何时!公平地说,大多数人都知道原因,但不是所有人。
场景
- 您一直在访问同一个站点。
- 您是一名测试人员,您的开发团队发布了新版本的网络应用。
- 您是一名企业家,您发布了新版本的网络应用程序。
您正在浏览器上加载的网络 url 正在发生以下情况之一:
- 网络应用根本不加载。
- Web 应用程序突然开始表现不一致。
- 加载页面时出现新的随机错误。
类比
虽然上面提到的这些问题背后可能有很多原因,例如软件中的错误,或者浏览器与新组件不兼容等。在您执行所有相关操作以调试或解决这些问题之前最简单和最快的解决方案之一是:"HARD PAGE REFRESH"!
但是为什么呢? (见下文)
简答
浏览器缓存CSS、JS 和其他文件以提高网络应用程序及其相关页面的加载时间。根据新版JS时网站的实现方式,添加CSS以及与旧版文件的形态差异。页面的新部分正在调用缓存在浏览器中的旧版本文件或与之交互。这会导致行为不一致。
长答案
在过去的 Web 应用程序开发中,页面有较小的 JavaScript 和 CSS 文件,如果有足够酷的地方可以超越基本的 HTML 页面。页面也存储在单独的 HTML 文件中。当您单击新的 link.
时,浏览器将加载一个全新的页面应用程序
在现代网络应用程序中,转向是单页应用程序。在这些应用程序中,您只有一个页面负责加载内容。所有现代网站(例如 Facebook、Netflix 等)都是使用新技术构建的。
在单页应用程序中,同一个页面有大的 JS 和附加到它的 CSS 文件。这意味着尽管我们的互联网速度有了巨大的提高,但浏览器在每次用户刷新时加载整个单页及其所有 JS、CSS、IMG 文件的效率仍然很低。通过缓存这些文件,意味着浏览器现在只需要在页面上加载新的数据内容。这会带来更好的用户体验。
缺点是发布了新的 JS 或 CSS 文件,而浏览器仍在使用旧的 JS 或 CSS 文件。它会以不可预知的方式影响业务逻辑或布局。这就是为什么浏览器引入了 HARD PAGE REFRESH 选项以允许强制从后端服务器而非缓存加载单页应用程序的原因。
如果您对这个主题感兴趣,您可以进一步阅读有关如何设置单页应用程序的最佳实践,以确保每次发布新的 JS 或 CSS 甚至图像时,都能保证浏览器重新加载内容,不要使用缓存的资源。
背景
虽然 HOW 上有很多博客、Whosebug 问题和答案,但我还没有找到 WHY[=35 的任何踪迹=]/何时!公平地说,大多数人都知道原因,但不是所有人。
场景
- 您一直在访问同一个站点。
- 您是一名测试人员,您的开发团队发布了新版本的网络应用。
- 您是一名企业家,您发布了新版本的网络应用程序。 您正在浏览器上加载的网络 url 正在发生以下情况之一:
- 网络应用根本不加载。
- Web 应用程序突然开始表现不一致。
- 加载页面时出现新的随机错误。
类比
虽然上面提到的这些问题背后可能有很多原因,例如软件中的错误,或者浏览器与新组件不兼容等。在您执行所有相关操作以调试或解决这些问题之前最简单和最快的解决方案之一是:"HARD PAGE REFRESH"!
但是为什么呢? (见下文)
简答
浏览器缓存CSS、JS 和其他文件以提高网络应用程序及其相关页面的加载时间。根据新版JS时网站的实现方式,添加CSS以及与旧版文件的形态差异。页面的新部分正在调用缓存在浏览器中的旧版本文件或与之交互。这会导致行为不一致。
长答案
在过去的 Web 应用程序开发中,页面有较小的 JavaScript 和 CSS 文件,如果有足够酷的地方可以超越基本的 HTML 页面。页面也存储在单独的 HTML 文件中。当您单击新的 link.
时,浏览器将加载一个全新的页面应用程序在现代网络应用程序中,转向是单页应用程序。在这些应用程序中,您只有一个页面负责加载内容。所有现代网站(例如 Facebook、Netflix 等)都是使用新技术构建的。
在单页应用程序中,同一个页面有大的 JS 和附加到它的 CSS 文件。这意味着尽管我们的互联网速度有了巨大的提高,但浏览器在每次用户刷新时加载整个单页及其所有 JS、CSS、IMG 文件的效率仍然很低。通过缓存这些文件,意味着浏览器现在只需要在页面上加载新的数据内容。这会带来更好的用户体验。
缺点是发布了新的 JS 或 CSS 文件,而浏览器仍在使用旧的 JS 或 CSS 文件。它会以不可预知的方式影响业务逻辑或布局。这就是为什么浏览器引入了 HARD PAGE REFRESH 选项以允许强制从后端服务器而非缓存加载单页应用程序的原因。
如果您对这个主题感兴趣,您可以进一步阅读有关如何设置单页应用程序的最佳实践,以确保每次发布新的 JS 或 CSS 甚至图像时,都能保证浏览器重新加载内容,不要使用缓存的资源。