Chrome 如何清除浏览器缓存

在 Web 开发过程中，为了确保您能看到最新的代码更改，而不是浏览器缓存的旧版本，清空缓存是至关重要的。本文将介绍在 Chrome 浏览器中清除内存缓存和硬盘缓存的几种常用方法，您可以根据开发需求选择最合适的一种。

背景知识：内存缓存 vs. 硬盘缓存

在了解如何清除缓存之前，我们先来理解两种主要的浏览器缓存类型：内存缓存（memory cache）和硬盘缓存（disk cache）。

内存缓存 (from memory cache)

当您在 Chrome 开发者工具中看到资源状态为 200 OK (from memory cache) 时，意味着资源是从计算机的内存（RAM）中加载的。

• 特点：
  • 速度极快：内存的读写速度远快于硬盘，因此从内存缓存中加载资源几乎是瞬时的。
  • 生命周期短：内存缓存是临时的，当您关闭浏览器标签页或整个浏览器时，内存缓存中的数据就会被清除。
  • 优先级高：浏览器会优先从内存缓存中查找资源。如果在内存中找到，就直接使用，不再检查硬盘缓存。
• 常见场景：
  • 在同一个页面中，对于一些重复使用的资源，例如脚本、小图片等，浏览器会倾向于将它们放在内存缓存中。
  • 频繁访问的资源更有可能被存放在内存中。

硬盘缓存 (from disk cache)

当资源状态为 200 OK (from disk cache) 时，表示资源是从您计算机的硬盘驱动器中加载的。

• 特点：
  • 速度较快：虽然比不上内存缓存，但从硬盘读取数据仍然比通过网络从服务器重新下载要快得多。
  • 生命周期长：硬盘缓存是持久性的，即使您关闭了浏览器甚至重启电脑，只要缓存没有过期或被清除，这些资源就会一直存在。
  • 存储容量大：硬盘缓存可以存储比内存缓存更大、更多的文件。
• 常见场景：
  • 对于较大的文件，或者不那么频繁访问的资源，浏览器更倾向于将它们存储在硬盘缓存中。
  • 当您关闭并重新打开浏览器后，再次访问同一个网站，资源会从硬盘缓存中加载。

简单总结：您可以将内存缓存想象成您放在口袋里随时取用的东西，非常方便快捷，但能放的东西不多，而且换了衣服（关闭标签页）东西就没了。而硬盘缓存则像是您家里的储物柜，可以存放很多东西，并且长期保存，但每次拿取都需要多花一点时间。

---

方法一：在 Chrome 开发者工具中禁用缓存（推荐）

这是在 Chrome 开发过程中最常用、最方便的方法。它只在开发者工具打开时生效，不会影响您平时的浏览体验。

1. 在您的页面上按 F12 (或者 Ctrl+Shift+I / Cmd+Opt+I) 打开 Chrome 开发者工具。
2. 切换到 Network (网络) 标签页。
3. 勾选顶部的 Disable cache (禁用缓存) 复选框。

只要这个复选框被勾选并且开发者工具是打开状态，每次刷新页面时，Chrome 都会直接从服务器请求所有资源，完全绕过内存缓存和硬盘缓存。

对iframe的影响：此功能对页面中内嵌的 iframe 同样有效，所有 iframe 的资源也会被强制重新加载，是开发时处理 iframe 缓存问题的最佳方法。

方法二：在 Chrome 中清空缓存并硬性重新加载

当您需要一次性地彻底清除当前页面的缓存并重新加载时，这个方法非常有效。

1. 首先，按 F12 打开 Chrome 开发者工具。
2. 保持开发者工具为打开状态，鼠标右键点击浏览器左上角的“刷新”按钮（或者长按左键）。
3. 此时会出现一个下拉菜单，选择 Empty Cache and Hard Reload (清空缓存并硬性重新加载)。

这个操作会清除与该页面相关的所有缓存（包括内存和硬盘），然后强制从服务器重新下载所有资源。

对iframe的影响：这个操作对页面中的 iframe 也同样有效，能确保 iframe 内部也得到刷新。

菜单选项说明：

• Normal Reload (正常重新加载)：使用缓存，会检查服务器资源是否有更新。
• Hard Reload (硬性重新加载)：强制浏览器重新下载页面主要资源，但页面中通过脚本动态加载的资源可能仍会使用缓存。
• Empty Cache and Hard Reload (清空缓存并硬性重新加载)：最彻底的方式，会先清空当前页面的所有缓存，然后再进行硬性重新加载。

方法三：使用快捷键进行硬性重新加载

这是一个在 Chrome 中快速进行硬性重新加载的方法，可以绕过缓存加载页面资源。

• Windows / Linux: Ctrl + Shift + R 或 Ctrl + F5
• macOS: Cmd + Shift + R

这个快捷键相当于“Hard Reload”，在大多数情况下足够用了。

对iframe的影响：效果不完全可靠。它通常能重新加载 iframe 的HTML文件，但对于 iframe 内部通过脚本动态加载的资源，不一定能保证绕过缓存。

方法四：通过 Chrome “应用”面板清除网站数据

这是一种更彻底的清除方式，它不仅可以清除缓存，还可以删除与该网站相关的其他所有存储数据。

1. 按 F12 打开 Chrome 开发者工具。
2. 切换到 Application (应用) 标签页。
3. 在左侧菜单中选择 Storage (存储)。
4. 确保 Cache storage (缓存存储) 等您想清除的选项被勾选。
5. 点击 Clear site data (清除网站数据) 按钮。

这个操作会清除该网站的硬盘缓存、Service Worker缓存、Cookies、LocalStorage等所有本地数据。

对iframe的影响：此功能是基于“源”（Origin）的，效果取决于 iframe 是否与主页面同源。

• 同源 iframe：如果 iframe 的源与主页面相同，此操作会一并清除 iframe 的缓存。
• 跨源 iframe：如果 iframe 的源与主页面不同，此操作不会清除 iframe 的缓存。