admin 管理员组

文章数量: 1184232

在 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 的缓存。

本文标签： 内存缓存 硬盘缓存 编程

版权声明：本文标题：Chrome 如何清除浏览器缓存_chrome清除缓存 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1774323904a3570414.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。