瀏覽器中F5和CTRL F5的行爲區別

原創

2020-02-22 20:35

前言

在印象中，瀏覽器中的F5和刷新按鈕是一樣的效果，都是對當前頁面進行刷新；Ctrl-F5的行爲也是刷新頁面，但是會清除瀏覽器緩存，這在前端調試時候會常用。二者真正的區別是什麼呢？在stackoverflow上有人給出了很詳細的解釋，整理如下。

說明

在不同的瀏覽器中F5和CTRL-F5的行爲是不一樣的，但是他們的主要行爲還是非常相似的，以下結果是在FF，IE，Opera和Chrome中進行過測試得出。

F5使用緩存，並且只有在資源內容發生變化的時候纔會去更新資源。

當刷新一個頁面的時候，瀏覽器會嘗試使用各種類型的緩存，並且會發送If-Modified-Since頭到服務器，如果服務器返回304 Not Modified，那麼瀏覽器會使用本地的緩存；如果服務器返回200 OK和資源內容，那麼瀏覽器會使用返回的資源內容，並把資源內容進行緩存，待下次使用。

CTRL-F5 強制更新頁面資源的緩存。

MSIE會發送Cache-Control: no-cache頭，Firefox和Chrome除了發送Cache-Control: no-cache頭之外，還會發送Pragma: no-cache頭。Opera比較另類，不發送任何和緩存相關的頭。

以下表格很直觀的表明了F5和CTRL-F5的行爲，由於原文中測試的瀏覽器版本較低，所以進行了更新。

F5 and CTRL-F5
┌────────────┬───────────────────────────────────────────────┐
│  UPDATED   │                 Firefox 3.x 4.x               │
│2011-04-24  │  ┌────────────────────────────────────────────┤
│            │  │              MSIE 7 8                      │
│            │  │  ┌─────────────────────────────────────────┤
│            │  │  │           MSIE 9                        │
│            │  │  │  ┌──────────────────────────────────────┤
│            │  │  │  │        Chrome 10                     │
│            │  │  │  │  ┌───────────────────────────────────┤
│            │  │  │  │  │     Opera 11                      │
│            │  │  │  │  │  ┌────────────────────────────────┤
│            │  │  │  │  │  │ I = "If─Modified─Since"        │
├────────────┼──┼──┼──┼──┼──┤ P = "Pragma: No─cache"         │
│          F5│IM│IM│I │IM│I │ C = "Cache─Control: no─cache"  │
│     CTRL─F5│CP│C │C │CP│- │ M = "Cache─Control: max─age=0" │
│  Click Icon│IM│I │I │IM│I │ Click Icon= "a mouse click on  │
│            │  │  │  │  │  │ refresh icon"                  │
└────────────┴──┴──┴──┴──┴──┴──-─────────────────────────────┘

HTTP協議說明

HTTP/1.1規範14.9.4中規定：

End-to-end reload(即CTRL-F5強制刷新)會發送如下HTTP頭：
Cache-Control: no-cache
Pragma: no-cache
Specific end-to-end revalidation(即F5 刷新)會發送如下HTTP頭：
Cache-Control: max-age=0
If-Modified-Since: Fri, 15 Apr 2011 12:08:21 GMT