强缓存与协商缓存(http缓存)

一、强缓存与协商缓存(http缓存)

1、在浏览器访问资源时，利用HTTP缓存能显著提升效率，减少重复请求与响应时间，节省宽带资源，减轻服务器压力，改善用户体验。其中，强缓存与协商缓存是最常用的两种方式。

2、强缓存主要通过`Cache-Control`字段实现。当客户端请求资源时，服务器默认会在响应头中携带`Cache-Control: public, max-age=0`。此值表示资源将被缓存，`max-age=0`意味着资源不会过期，请求将直接从本地缓存加载，无需访问服务器，状态码返回200。

3、协商缓存则通过资源标识（Etag）与服务器进行比较。Etag是一个由服务器根据资源内容编码生成的字符串，用于标识资源。当客户端再次请求资源时，会将Etag值作为`if-none-match`字段发送给服务器。服务器生成资源的新Etag与客户端的Etag进行对比，如果一致则返回304状态码，浏览器从本地缓存加载资源，否则返回新资源和新Etag值。

4、为了减少对缓存机制的深入理解，浏览器通常会自动管理缓存策略，将频繁操作的文件缓存在内存中，加载快速；不频繁操作的文件则缓存在硬盘中，加载速度相对较慢。用户只需关注缓存机制的存在，而无需担心具体的缓存文件位置或管理细节。

5、实现协商缓存的另一个方法是通过修改浏览器请求，使用`Ctrl+ F5`或`Ctrl+ Shift+ R`，以清除缓存并强制刷新页面内容，从而避免命中缓存。

6、总结而言，强缓存与协商缓存通过优化资源请求与加载流程，实现高效的资源管理，显著提升网页加载速度与用户体验。理解这两种缓存机制的基本原理与应用方法，将有助于在开发与优化网站时，做出更高效与合理的资源管理决策。

二、一文搞定Http缓存-强制缓存与协商缓存

1、本文从关注前端页面性能优化从而进一步理解HTTP缓存的核心过程，更详细的页面加载渲染和网络请求你可以参考文章：前端浏览器从输入URL到页面展现中间发生过程全面解析

2、当浏览器访问网站的时候,第一访问的时候需要加载资源htmlcssjs图片,向服务器请求资源第一次之后访问可以利用缓存的功能从缓存中获取可以提高页面加载的速度,输入网址到页面加载减少网络请求的体积和数量可以加快页面性能

3、浏览器再次请求先判断max-age有没有过期,没有过期直接从缓存里拿资源

4、通过cache-control设置一个最大的有效时间max-age=300需要缓存就设置cache-control,不需要缓存就不设置cache-control,cache-control的设置都是有服务器通过响应头设置过来的

5、浏览器再次请求发送亲鼓起和资源标识

6、如果不是最新资源服务器返回200状态码、最新资源和新的资源标识,如果是最新资源服务器返回304状态码直接从缓存中拿资源

7、Last-Modified:资源上一次修改的时间后续访问的时候发送请求和资源标识的字段名为If-Modified-Since放在请求头里面

8、ETag:资源对应的唯一字符串后续访问的时候发送请求和资源标识的字段名为If-None-Match放在请求头里面优先使用Etag

9、文件如果每隔一段时间都重复生成,但内容相同,Last-Modified会每次返回资源文件,即便是内容相同。但是ETag可以判断出文件内容相同就返回304,使用缓存

10、了增加访问效率，计算机有域名缓存机制，当访问过某个网站并得到其IP后，会将其域名和IP缓存下来，下一次访问的时候，就不需要再请求域名服务器获取IP，直接使用缓存中的IP，提高了响应的速度。当然缓存是有有效时间的，当过了有效时间后，再次请求网站，还是需要先请求域名解析。

11、但是域名缓存机制也可能会带来麻烦。例如IP已变化了，仍然使用缓存中的IP来访问，将会访问失败。再如同一个域名在内网和外网访问时所对应的IP是不同的，如在外网访问时通过外网IP映射到内网的IP。同一台电脑在外网环境下访问了此域名，再换到内网来访问此域名，在DNS缓存的作用下，也会去访问外网的IP，导致访问失败。根据情况，可以手动清除DNS缓存或者禁止DNS缓存机制。\在你的chrome浏览器中输入:chrome://dns/，你可以看到chrome浏览器的DNS缓存。系统缓存主要存在/etc/hosts(Linux系统)中

三、什么是浏览器缓存彻底弄懂浏览器缓存(强缓存、协商缓存)

合理利用缓存，可以显著提升页面打开速度。为了深入了解浏览器缓存，我们通过Chrome DevTools与Lighthouse工具进行实测，对比有缓存和无缓存情况下掘金主页的性能表现。无缓存测试中，FCP（白屏时间）、TTI（交互响应时间）、LCP（最大内容时间）分别为1s、2.8s和2.9s。有缓存测试下，这些指标分别缩短至0.7s、1.4s和1.4s，验证了合理利用缓存能有效提升页面性能。

浏览器缓存是指浏览器将不常变的资源保存在本地，以减少请求服务器的次数，加快页面加载速度。判断资源是否来自缓存可通过Network面板中的Size列表，列表中标注“from memory cache”或“from disk cache”表示资源来自缓存。

前端常用的缓存策略结合了强缓存与协商缓存。强缓存通过HTML文档配置协商缓存，JS、CSS、图片等资源配置强缓存，以便在项目版本更新时获取最新页面，同时复用之前的缓存资源，既利用了浏览器缓存，又解决了页面版本更新问题。

浏览器缓存流程中，强缓存适用于未过期的资源，过期则请求服务器。缓存是否过期通过服务器响应头中的Cache-Control或Expires字段判断。Cache-Control字段在HTTP1.1中用于控制网页缓存，max-age参数表示资源在多少秒后过期。Cache-Control: no-cache表示资源会被缓存，但每次访问都会向服务器验证缓存有效性；Cache-Control: no-store则表示响应不被缓存。Expires字段在HTTP1.0中用于设置资源缓存的到期时间，但本地时间可被修改，HTTP/1.1中已被Cache-Control替代。

内存缓存与硬盘缓存的主要区别在于存储位置与读取速度，内存缓存速度快，硬盘缓存速度较慢。初次访问掘金主页并刷新时，缓存来自内存与硬盘；关闭页面后再打开时，所有缓存都来自硬盘。JS和图片文件解析执行后直接存入内存，从内存读取(from memory cache)；CSS文件存入硬盘，每次渲染页面需从硬盘读取缓存(from disk cache)。

协商缓存机制允许浏览器携带缓存标识向服务器发送请求，服务器根据缓存标识判断资源是否过期。这主要应用于HTML资源，验证版本是否更新。触发条件包括Last-Modified（文件最后修改时间）和ETag（当前资源文件的唯一标识）。验证流程涉及服务器响应头返回Last-Modified或ETag，客户端请求头携带上次请求返回的值，服务器对比确认资源是否更新，返回相应状态码。

ETag的出现解决了Last-Modified难以处理的问题，如文件周期性修改但内容不变或频繁修改导致粒度不准确。ETag优先级高于Last-Modified，若两者同时存在，服务器优先校验ETag。协商缓存的两种状态为资源未变化返回304，资源已更新返回200。流程包括初次请求获取文件内容与Header（包括Etag和Last-Modified），第二次请求时客户端携带if-none-match和if-modified-since值，服务器优先判断ETag，资源未变返回304，继续使用缓存；资源更新返回200并返回最新资源。