1. 什么是缓存？
在了解清除缓存的方法之前，先来了解一下什么是缓存。在互联网应用中，由于访问服务器的速度远远慢于直接读取本地数据的速度，因此服务器的响应会成为网站响应速度的瓶颈，而对于一些相对静态的资源，比如图片、JavaScript、CSS等，每次访问都从服务器下载显然并不是很划算，通常浏览器会在本地建立缓存来存储这些数据，从而跳过服务器和互联网，直接读取本地数据，进而提高网页打开的速度。
但是，由于缓存存储的是旧版本的文件，所以缓存也可能造成一些问题。比如当我们打开一个网站的时候，缓存会从本地加载该网站的文件，如果这个文件已被更新，那么该网站的显示就会出错或者不完整。因此，当网站出现问题，或者我们进行开发过程中，需要清除缓存以获取最新版本的资源文件。
2. 如何清除缓存
2.1 在浏览器中清除缓存
在浏览器中清除缓存一般都是针对缓存资源进行处理，下面我们以 Chrome 浏览器为例，介绍如下：
在 Google Chrome 的地址栏中输入 chrome://settings/clearBrowserData，并按下 Enter 键打开 Chrome 浏览器的数据清除界面。
在这个界面中，我们可以选择清除缓存的时间范围，点击“高级”并选择需要清除的浏览器数据类型，包括浏览历史、Cookies、广告屏蔽等。如果只需要清除缓存，只需要选中“缓存图像和文件”这一项即可，如下所示。
清除缓存示意图
<img src="https://s1.ax1x.com/2020/03/26/Gw9bHg.png" alt="清除缓存示意图">
清除过程可能需要一些时间，等待清除结束之后，我们就成功地清除了 Chrome 浏览器中的缓存。
2.2 在 HTML 文件中添加版本号清除缓存
除了在浏览器中清除缓存之外，我们还可以通过在 HTML 文件中添加版本号的方式来清除缓存，这种方法虽然相对来说比较麻烦，但是是一种优秀的手段。这里简单介绍一下：
我们都知道，浏览器是根据 URL 来缓存文件的，因此，可以通过在 URL 后添加版本号或者时间戳的方式，来实现每次请求获取新的资源。比如我们可以将文件路径改为 “test.css?v=1”，每次更新文件后，修改版本号为 “test.css?v=2”，这时候，浏览器会判定路径为 “test.css?v=2”是新的文件，进而更新本地缓存。如下所示：
<link rel="stylesheet" type="text/css" href="styles.css?v=1">当我们需要更新资源文件时，只需要改变后面的版本号即可，这样能够有效地避免了缓存问题的产生。不过这种方法对于大型网站来说，需要修改的文件路径还是比较多的，因此这种方法主要用于开发环境下，或者对于一些资源量较小的小型网站。
3. 结束语
学习了本文，相信你已经掌握了清除浏览器缓存的两种方法，其中在 HTML 文件中添加版本号清除缓存，是一种很好的优化方式，但是在实际的应用中可能需要根据情况来选择使用哪一种方法。如果在开发过程中出现了奇怪的问题，一定要及时清除缓存哦。