在解决这个问题之前，我们必须要了解，什么是缓存？缓存的作用是什么？

PS：图片来源博客，深入理解浏览器的缓存机制

缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。

对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。

不过，当不期望的数据被缓存时，这也会带来一些额外的问题。这种情况下，我们可以通过清除缓存并刷新页面来解决。

Chrome浏览器允许通过三种不同的方式来重新加载一个web页面：Normal Reload，Hard Reload，Empty Cache and Hard Reload。

当我们按F5（或者Fn+F5）时，实际上执行的是Normal Reload操作。此时浏览器会避免重新下载已缓存的资源，例如JavaScript文件。这个操作等同于，直接鼠标右键点击浏览器，选择重新加载，或者直接点击刷新按钮

在Chrome中，当"Developer Tools"（开发者工具）被打开时，鼠标右击当前页面的刷新按钮，你会看到一些额外的选项。在Chrome中，按F12键可以打开开发者工具。 然后，右键点击当前页面的刷新按钮，一般会在地址栏的左侧，你会看到3个刷新选项：

　 硬性重新加载情况下，浏览器不会使用缓存中的任何内容，所有的内容会被重新下载。这和按Ctrl + F5的效果是一样的。但是如果页面通过重定向加载额外的资源，则有可能会从缓存加载数据。

当选择清空缓存并硬性重新加载时，浏览器将首先清空缓存，然后重新下载所有资源。如果网页是通过JavaScript代码动态加载的，使用这种方式将非常有效。

一般较为常用的使用场景有两个：