Web中的静态资源缓存机制

本文同步发表在我的个人博客静态资源缓存机制

个人博客的评论系统加了邮件通知，有什么想和作者说的建议在个人博客留言哦

后续若有变化，将只在个人博客更新，恕此处不再修改

背景

重用已获取的资源能够有效的提升网站与应用的性能。Web 缓存能够减少延迟与网络阻塞，进而减少显示某个资源所用的时间。借助 HTTP 缓存，Web 站点变得更具有响应性。缓存是提升 Web 性能的重要手段之一，作为前端，有必要对它进行深入理解。

一般情况下，缓存机制失效或者设置不正确，可能只是影响用户体验，但是极端情况下，会打挂你的服务器甚至CDN。我曾经参与了公司一个重要项目，涉及几十个团队上千人的大规模协作，结果静态资源的缓存设置错误，导致不停的从CDN请求静态资源，所幸在上线前发现了这个问题并及时修复了，否则一旦项目上线，整个公司所有服务都会受到影响（会被祭天的那种影响）。

在整个Web系统中，会有作用在不同阶段的多种缓存机制，例如网关缓存、CDN、反向代理缓存和负载均衡器等部署在服务器上的缓存方式，本文主要探讨和前端关系比较密切的浏览器中的静态资源缓存。

前言

缓存的目的

当我们请求某个资源时候，如果这个资源曾经下载过，那么在它过期之前是没有必要再从服务器下载，直接从本地缓存中读取即可，这么做有减轻服务器的压力、节约带宽等好处。

从缓存的目的出发，我们可以得到这个问题有几个关键点：

• 如何控制某个资源是否需要缓存？
• 如何判断某个资源是否过期？
• 如果过期了怎么办？

我认为缓存机制的设计基本上是围绕这三个问题展开的，让我们带着这三个问题去分析浏览器中的静态资源缓存机制。

静态资源缓存主要通过HTTP header中相关字段完成

我们知道HTTP 消息头允许客户端和服务器通过 request Header和 response Header传递附加信息。缓存机制的实现也是通过HTTP header中的一些字段完成。

首次请求时候，本地肯定没有缓存，所以请求会到服务端。服务端返回资源的时候会在请求的响应头的相关字段里标记此资源的缓存信息。浏览器收到这个资源后会根据响应头里的相关信息缓存资源，注意，这些用来控制缓存策略的字段会和资源本身一起被缓存在客户端，下次请求资源的时候会带着其中一些信息去发起请求。正是通过这样的前后端交