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

時間 2019-11-10

原文原文鏈接

前言

在印象中，瀏覽器中的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的行爲，因爲原文中測試的瀏覽器版本較低，因此進行了更新。測試

Updated table, 27 September 2010調試

+------------+-----------------------------------------------+
|  UPDATED   |                Firefox 3.x                    |
|27 SEP 2010 |  +--------------------------------------------+
|            |  |             MSIE 8, 7                      |
| Version 3  |  |  +-----------------------------------------+
|            |  |  |          Chrome 6.0                     |
|            |  |  +  +--------------------------------------+
|            |  |  |  |       Chrome 1.0                     |
|            |  |  |  |  +-----------------------------------+
|            |  |  |  |  |    Opera 10, 9                    |
|            |  |  |  |  |  +--------------------------------+
|            |  |  |  |  |  |                                |
+------------+--+--+--|--+-----------------------------------+
|          F5|IM|I |IM|IM|C |                                |
|    SHIFT-F5|- |- |CP|IM|- | Legend:                        |
|     CTRL-F5|CP|C |CP|IM|- | I = "If-Modified-Since"        |
|      ALT-F5|- |- |- |- |*2| P = "Pragma: No-cache"         |
|    ALTGR-F5|- |I |- |- |- | C = "Cache-Control: no-cache"  |
+------------+--+--+--|--+--+ M = "Cache-Control: max-age=0" |
|      CTRL-R|IM|I |IM|IM|C | - = ignored                    |
|CTRL-SHIFT-R|CP|- |CP|- |- |                                |
+------------+--+--+--|--+--+                                |
|       Click|IM|I |IM|IM|C | With 'click' I refer to a      |
| Shift-Click|CP|I |CP|IM|C | mouse click on the browsers    |
|  Ctrl-Click|*1|C |CP|IM|C | refresh-icon.                  |
|   Alt-Click|IM|I |IM|IM|C |                                |
| AltGr-Click|IM|I |- |IM|- |                                |
+------------+--+--+--+--+--+--------------------------------+

Versions tested:code

HTTP協議說明

HTTP/1.1規範14.9.4中規定：ci

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 GMTget