☰

当焦点位于地址栏时按“F5”和按“ENTER”是否有相同的效果？

tag-icon • tag-icon firefox google-chrome browser
当焦点位于地址栏时按“F5”和按“ENTER”是否有相同的效果？

这两件事做的是完全相同的事情吗？：

  1. 按下F5键
  2. 点击地址栏（将焦点放在该地址栏上），然后ENTER按键

我之所以问这个问题，是因为我发现第一种方法在 Chrome 中刷新页面需要更多时间。相反，在 Firefox 中，第一种方法刷新页面所需的时间较少。

请回答 Mozilla Firefox 和 Google Chrome 的最新版本。

答案1

虽然 w3d 的声明 F5 和 Enter 都将使用缓存，从技术上讲基本正确，但这是误导性的。魔鬼就在细节中。

按下 Enter 键时，浏览器可能会根据过期时间（httpExpires标头）和其他 http 标头从缓存中加载任何资源，而无需重新检查它们。这意味着大多数资源的加载速度与磁盘或 RAM 的响应速度一样快，如果资源在 RAM 中，则可能少于 1 毫秒。

另一方面，按 F5 键将始终向服务器发送请求，If-Modified-Since请求标头包含当前缓存的资源版本的时间戳。然后，服务器将使用200 OK状态代码和数据进行响应，或者使用304 Not Modified状态代码进行响应。对于静态资源，这很可能是304状态，浏览器将从缓存中加载资源。换句话说，浏览器在收到服务器响应之前不允许从缓存中加载资源。因此，当按 F5 键时，即使资源可能未完全重新传输，资源的加载时间仍受网络延迟和服务器响应时间的影响。每个资源可能需要 50-100 毫秒或更长时间。

可以使用浏览器内置开发工具的网络功能来观察此行为。您可以自己打开开发工具，按control+ shift+ I，选择网络，然后观察以不同方式重新加载页面时发生的情况。在 Chrome 中，您会看到按 Enter 键时，直接从缓存加载的资源将具有状态200 OK和大小(from cache)。在 Firefox 中，直接从缓存加载的资源甚至不会显示在网络视图中。另一方面，按 F5 时，所有资源的请求都会发送到服务器，服务器大多会以状态响应304。

答案2

  1. F5（重新加载/刷新）重新提交当前请求，包括任何 POST（已提交的表单）数据。将使用浏览器缓存。

  2. 按下地址栏中的按钮ENTER将对该 URL 发出新请求。表单数据不会重新提交。将使用浏览器缓存。

我不确定为什么 Chrome 和 Firefox 在这两种方法下会有性能差异。我怀疑这是由于它们的缓存机制不同。

相关内容