\\n\\n
现代浏览器提供了多种资源预加载机制:
\\n<link rel=\\"preload\\" href=\\"style.css\\" as=\\"style\\" />\\n
\\n<link rel=\\"prefetch\\" href=\\"next-page.js\\" />\\n
\\n<link rel=\\"preconnect\\" href=\\"https://example.com\\" />\\n
\\n浏览器会根据资源类型、使用频率和缓存策略来决定数据的存储位置,以平衡访问速度和存储效率。合理利用各种缓存机制,可以显著提升网站性能和用户体验。
\\n首先我们先栏看强缓存和协商缓存的工作流程图,如下所示:
\\n当浏览器请求资源(如 HTML、CSS、JS、图片等)时,会先检查缓存,决定是直接使用缓存还是向服务器请求新资源。整个缓存机制主要分为 强缓存 和 协商缓存 两种策略。
\\n强缓存是指在本地缓存资源未过期的情况下,浏览器直接使用缓存,不发送请求给服务器,提高访问速度。
\\n浏览器根据 Cache-Control
或 Expires
头信息判断缓存是否仍然有效:
Cache-Control: max-age=3600
:表示资源在 3600 秒(即 1 小时)内有效,不需要重新请求服务器。
Expires: Wed, 21 Oct 2025 07:28:00 GMT
:资源的绝对过期时间,若未超过此时间,直接使用缓存。
主要的处理流程如下:
\\nCache-Control
或 Expires
指示缓存仍有效,则直接从缓存读取资源,无需网络请求。如果强缓存失效,浏览器不会立即下载新资源,而是向服务器发起 条件请求,询问资源是否发生了变化,服务器通过特定头信息返回是否需要更新。
\\nETag
是服务器生成的资源唯一标识符,若资源修改,ETag
也会更新。
请求流程:
\\n浏览器请求资源时,服务器返回资源及 ETag
值,例如:
ETag: \\"abc123\\"\\n
\\n资源缓存后,浏览器下次请求时,在请求头中添加:
\\nIf-None-Match: \\"abc123\\"\\n
\\n服务器接收请求后:
\\n若 ETag
未变(资源未修改),返回 304 Not Modified
,浏览器直接使用缓存。
若 ETag
变化(资源已修改),返回 200 OK
,并提供新资源。
若服务器未使用 ETag
,浏览器会改用 Last-Modified
进行时间校验。
请求流程:
\\n服务器首次返回资源时,包含 Last-Modified
头,例如:
Last-Modified: Tue, 12 Mar 2024 10:00:00 GMT\\n
\\n浏览器下次请求时,在请求头中携带:
\\nIf-Modified-Since: Tue, 12 Mar 2024 10:00:00 GMT\\n
\\n服务器接收请求后:
\\n若资源未修改(时间未变),返回 304 Not Modified
,浏览器使用缓存。
若资源已修改(时间更新),返回 200 OK
,并提供新资源。
服务器根据 ETag
或 Last-Modified
进行校验后,返回相应的状态码:
状态码 | 含义 |
---|---|
200 OK | 资源有更新,返回新内容,并更新 ETag 或 Last-Modified 。 |
304 Not Modified | 资源未更改,浏览器使用缓存,不返回内容。 |
当 304
返回时,浏览器不会重新下载资源,只会复用本地缓存文件,从而节省带宽。
其中,在上面的流程中,又有几个令人难懂的字段,如下:
\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n头部字段 | 作用 |
---|---|
ETag | 资源唯一标识,变化表示资源已修改。 |
Expires | 绝对过期时间,浏览器用于强缓存判断。 |
Cache-Control | 详细缓存策略,如 max-age 、no-cache 、must-revalidate 。 |
Last-Modified | 资源最后修改时间,用于协商缓存判断。 |
If-None-Match | 浏览器携带 ETag 进行验证,匹配则返回 304 。 |
If-Modified-Since | 浏览器携带 Last-Modified 进行验证,时间一致则返回 304 。 |
强缓存 (Cache-Control
/ Expires
):如果资源未过期,直接从缓存加载,无需请求服务器。
协商缓存 (ETag
/ Last-Modified
):如果缓存过期,浏览器询问服务器资源是否更新:
ETag
优先(更精准),匹配则 304
。
无 ETag
时,用 Last-Modified
,时间一致则 304
。
最终处理
\\n304 Not Modified
:浏览器使用缓存,无需重新下载资源。
200 OK
:服务器返回新资源,并更新缓存策略。
这样既减少了服务器请求次数,也保证了资源的最新状态,提升了性能和用户体验。
\\n在上面的内容中讲了这么多的理论, 你是否还是不太理解什么是 强缓存
和 协商缓存
啊,那么接下来我们就用几张图片来弄清楚这两者的区别。
强缓存就是文件直接从本地缓存中获取,不需要发送请求。
\\n当浏览器发送初次请求时,浏览器会向服务器发起请求,服务器接收到浏览器的请求后,返回资源并返回一个 Cache-Control
字段给客户端,在该字段中设置一些缓存相关的信息,例如最大过期时间。
在前面的基础上,浏览器再次发送请求,浏览器一节接收到 Cache-Control
的值,那么这个时候浏览器它会首先检查它的 Cache-Control
是否过期,如果没有过期则直接从本地缓存中拉取资源,返回割到客户端,则无需再经过服务器。
强缓存有过期时间,那么就意味着总有一天缓存会失效,如果客户端的 Cache-Control
失效了,那么它就会像首次请求中一样,重新向服务器发起请求,之后服务器会再次返回资源和 Cache-Control
的值。
协商缓存也叫做对比缓存,服务端判断客户端的资源是否和服务端的一样,如果一样则返回 304
,反之返回 200
和最新的资源。
如果客户端是第一次向服务器发出请求,则服务器返回资源和对应的资源标识给浏览器,该资源标识就是对当前所返回资源的唯一标识,可以是 ETag
或者是 Last-Modified
。
之后如果浏览器再次发送请求是,浏览器就会带上这个资源表,此时服务端就会通过这个资源标识,可以判断出浏览器的资源跟服务器此时的资源是否一致,如果一致则返回 304 Not Modified
,如果不一致,则返回 200
,并返回资源以及新的资源标识。
If-Modified-Since
或 If-None-Match
头,服务器检查资源是否更新:\\n304 Not Modified
,浏览器使用缓存数据。200 OK
,并提供新资源。Cache-Control
或 Expires
是否有效,都会直接向服务器请求最新资源。If-Modified-Since
或 If-None-Match
,直接获取完整的新资源。If-Modified-Since
或 If-None-Match
进行协商缓存验证。Memory Cache
(内存缓存),如果页面仍在内存中,不会向服务器请求,直接使用缓存数据。Memory Cache
或 Disk Cache
。刷新方式 | 强制缓存 | 协商缓存 | 服务器负担 |
---|---|---|---|
F5 | 可能使用 | 失效时生效,返回 304 或 200 | 适中 |
Ctrl + F5 | 跳过缓存,直接请求服务器 | 跳过协商缓存,请求最新资源 | 高 |
地址栏回车 | 可能使用 | 失效时生效,返回 304 或 200 | 适中 |
前进 / 后退 | 直接使用 Memory Cache | 很少触发 | 低 |
清空缓存后刷新 | 不使用,直接请求 | 不使用,直接请求 | 高 |
不同刷新方式的应用场景:
\\n普通刷新(F5) 适用于检查页面是否有更新,同时减少不必要的服务器请求。
\\n强制刷新(Ctrl + F5) 适用于确保获取最新内容,如前端开发调试或页面异常。
\\n地址栏回车 适用于正常访问网站,与 F5 类似。
\\n前进 / 后退 适用于快速浏览历史页面,提高页面切换速度。
\\n清空缓存后刷新 适用于解决缓存导致的问题,如 CSS/JS 资源未更新。
\\n合理利用不同的刷新方式可以提高页面加载速度,同时减少服务器负担。
\\n强缓存(本地缓存)是指在资源的缓存有效期内,浏览器无需向服务器发送请求,直接使用本地缓存的数据,提高页面加载速度,减少网络请求。它主要依赖 Cache-Control: max-age
或 Expires
头信息来控制资源的有效期,当缓存未过期时,浏览器不会发起请求。
协商缓存(条件请求)是在强缓存失效后,浏览器向服务器发送请求,并携带 ETag
或 Last-Modified
进行资源校验。服务器通过比对 ETag
或 Last-Modified
判断资源是否更新,若资源未变更,则返回 304 Not Modified
,浏览器继续使用缓存,否则返回 200 OK
并提供新资源。
两者结合使用可以优化网页加载性能,减少服务器压力,同时确保数据的时效性。
","description":"面试导航 是一个专注于前、后端技术学习和面试准备的 免费 学习平台,提供系统化的技术栈学习,深入讲解每个知识点的核心原理,帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经,帮助你快速掌握面试技巧,提升求职竞争力。如果你想加入我们的交流群,欢迎通过微信联系:yunmz777。 强缓存和协商缓存基本概念\\n\\n浏览器缓存是浏览器在本地存储用户最近请求的资源,以便在后续访问相同页面时能更快加载,提高性能并减少服务器负担。根据缓存策略,浏览器缓存可分为 强缓存 和 协商缓存:\\n\\n强缓存:浏览器在请求资源时…","guid":"https://juejin.cn/post/7480782489658720282","author":"Moment","authorUrl":null,"authorAvatar":null,"insertedAt":"2025-03-13T02:44:02.655Z","publishedAt":"2025-03-13T01:44:56.214Z","media":[{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/7123b89e7f804f4ba1e28465b625528e~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTW9tZW50:q75.awebp?rk3s=f64ab15b&x-expires=1742435125&x-signature=YLdIMbH9fbyQW3aYOTukP3GZayw%3D","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/4d9fdcf16986436cb6858fdbda3dee60~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTW9tZW50:q75.awebp?rk3s=f64ab15b&x-expires=1742435125&x-signature=zVFdqN8X3%2F0pPYyx7OAP8A0oAXs%3D","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c18ae235bda74c6cac760816176045c9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTW9tZW50:q75.awebp?rk3s=f64ab15b&x-expires=1742435125&x-signature=BXlcyAC2EeEazo9NN8M3qZHPG6E%3D","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1bdd8c8bcf89410fbb295a6bfb158321~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTW9tZW50:q75.awebp?rk3s=f64ab15b&x-expires=1742435125&x-signature=dptDuLfxZIwKwdasOWuACqO6xt0%3D","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/3384db27cdec45faa1e51e3ae24255a3~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTW9tZW50:q75.awebp?rk3s=f64ab15b&x-expires=1742435125&x-signature=x9NCxFwQaBdgJVjb2z6NlKcrTKs%3D","type":"photo","width":0,"height":0,"blurhash":""},{"url":"https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/c95198a014a1491fbad5aee93a92126f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTW9tZW50:q75.awebp?rk3s=f64ab15b&x-expires=1742435125&x-signature=%2BOgpT53haw6k7e%2BZeFdcN6p5ODY%3D","type":"photo","width":0,"height":0,"blurhash":""}],"categories":["前端","后端","JavaScript"],"attachments":null,"extra":null,"language":null,"feeds":{"type":"feed","id":"68841432688565248","url":"rsshub://juejin/posts/3782764966460398","title":"掘金专栏-Moment","description":"蒹葭苍苍,白露为霜,所谓伊人,在水一方 - Powered by RSSHub","siteUrl":"https://juejin.cn/user/3782764966460398/posts","image":"https://p9-passport.byteacctimg.com/img/user-avatar/4ae08cddb21bbb8e795235baef9a095e~300x300.image","errorMessage":"[http://10.1.32.41/] [GET] \\"http://10.1.32.41/juejin/posts/3782764966460398?format=json\\":