【前端词典】F5 同 Ctrl+F5 的区别你可了解

前言

F5 和 Ctrl+F5 使用的频率很高，但是在使用的时候有没有想过 F5 和 Ctrl+F5 的区别是什么？ 这篇文章会将 F5 和 Ctrl+F5 刷新页面的原理讲清楚。经过这篇小文，即使是对浏览器缓存机制加深一点点的认知，也是有所裨益的。

入题

下图是咱们第一次打开掘金的 Network 界面，因为是第一次打开，因此所有资源是从服务器请求的，Status 都是 200。

接下来咱们按一下 F5，看看效果；

发现静态资源的 Size 都是 from disk cache；说明此时的静态资源是从缓存中取的。具体为何 Size 是 from disk cache 我先按下不表。我先来讲说 size 选项的 4 种状况。

size 选项的 4 种状况

1. 资源的大小
2. from disk cache
3. from memory cache
4. from ServiceWorker

from memory cache

表示此资源是取自内存，不会请求服务器。已经加载过该资源且缓存在内存当中；关闭该页面此资源就被内存释放掉了，再次打开相同页面时不会出现 from memory cache 的状况。

from disk cache

表示此资源是取自磁盘，不会请求服务器。已经在以前的某个时间加载过该资源，可是此资源不会随着该页面的关闭而释放掉，由于是存在硬盘当中的，下次打开仍会 from disk cache。

资源自己大小数值

当 http 状态为 200 是实实在在从浏览器获取的资源，当 http 状态为 304 时该数字是与服务端通讯报文的大小，并非该资源自己的大小，该资源是从本地获取的。

from ServiceWorker

表示此资源是取自 from ServiceWorker。

如今咱们再按下 Ctrl+F5，看看效果

发现 Size 显示的又是资源自身的大小，说明 Ctrl+F5 后的资源又是从新从服务器中请求获得的。

F5 同 Ctrl+F5 的区别

为何 F5 后请求的是缓存，而 Ctrl+F5 就从新请求资源呢？答案就是这两种方式发送的请求头不同（不一样的浏览器发送的请求头也有一些区别）。

F5

在 chrome 浏览器中按 F5 后，看到资源的请求头中有 provisional headers are show 字样。这是为何呢？

缘由：未与服务端正确通讯。该文件是从缓存中获取的并未进行通讯，因此详细标头并不会显示。强缓存 from disk cache 或者 from memory cache ，都不会正确的显示请求头。

下面看看按 F5 后在 firefox 浏览器中的表现。

从图中能够看出返回的状态码是 304 Not Modified。

这是由于按 F5 进行页面刷新时请求头会添加 If-Modified-Since 字段，若是资源未过时，命中缓存，服务器就直接返回 304 状态码，客户端直接使用本地的资源。

能够看出 chrome 和 firefox 在按下 F5 后，其内部使用的缓存机制不一样。firefox 使用的是协商缓存，而 chrome 使用的是强缓存。

Ctrl+F5

咱们仍是先看看在 chrome 中 Ctrl+F5 的表现。

咱们发如今请求头中多了两个 Cache-Control:no-cache，Pragma:no-cache 参数，这两个参数什么意思呢？

在请求头中的 Cache-Control:no-cache 表示客户端不接受本地缓存的资源，须要到源服务器进行资源请求，其实可使用缓存服务器的资源，不过须要到源服务器进行验证，验证经过就能够将缓存服务器的资源返回给客户端。

那么在 firefox 中的表现是怎样的呢？

请求头中一样多了两个 Cache-Control:no-cache，Pragma:no-cache 参数。

能够看出 chrome 和 firefox 在按下 Ctrl+F5 后，都不会使用本地缓存，而且对缓存服务器的资源会再验证。

写到这里差很少就把 F5 同 Ctrl+F5 的缓存原理讲的差很少了。不过每一个浏览器它们在实现同一个动做的时候，老是会有差别，不过在业界内 chrome 的缓存优化机制是作的最好的。这也是为何咱们在使用 chrome 开发或者是浏览网站的时候体验都不错的缘由。

读完 F5 同 Ctrl+F5 刷新页面的原理，其实你也把强缓存和协商缓存的区别也复习了一遍。

补充

咱们能够经过勾选 `Network` 面板中的 `Disable cache` 选项，这样当你按 `F5` 的时候，也是直接请求服务器资源的效果。

前端词典系列

《前端词典》这个系列会持续更新，每一期我都会讲一个出现频率较高的知识点。但愿你们在阅读的过程中能够斧正文中出现不严谨或是错误的地方，本人将不胜感激；若经过本系列而有所得，本人亦将不胜欣喜。

若是你以为个人文章写的还不错，能够关注个人微信公众号，公众号里会提早剧透呦。

你也能够添加个人微信 wqhhsd， 欢迎交流。

下期预告

【前端词典】使用 Canvas 画一个下雪的背景

传送门

1. 【前端词典】和媳妇讲代理后的意外收获
2. 【前端词典】滚动穿透问题的解决方案
3. 继承（一） - 原型链你真的懂吗？
4. 【前端词典】继承（二） - 回的八种写法·面试必问
5. 【前端词典】进阶必备的网络基础（上）
6. 【前端词典】进阶必备的网络基础（下）