浏览器缓存之强缓存和协商缓存

前一段时间看看浏览器缓存，觉得自己在这方面还是有所欠缺，特此记录一下，共勉。

浏览器缓存

缓存对于前端性能优化来说是个可谓是一大大重点。好的缓存策略可以带来质的提升。

优点：

• 可以减少不必要的数据传输，

• 提升网页加载速度，

• 减少服务器性能。

• 增加用户体验等等。

通常浏览器缓存策略分为两种：强缓存和协商缓存

强缓存

强缓存可以通过 Cache-Control 响应头实现。强缓存表示在缓存期间不需要请求，过期后才会请求服务器， state code 为 200

如上我们可以看到掘金某接口就对强缓存就行了设置。（当然他设置的是不缓存。。。）

一般格式如下：

Cache-control: max-age=30, public

• max-age: 表示缓存的时间

• public: 表示客户端和代理服务器都可以缓存该资源

协商缓存

前面我们说到强缓存，缓存期过了，才会请求服务器。这个时候，我们就可以用到协商缓存了。协商缓存需要请求，如果缓存有效会返回 304 。协商缓存需要客户端和服务端共同实现。

Last-Modified / If-Modified-Since

• Last-Modified: 本地⽂件最后一次的修改时间，

• If-Modified-Since 会将 Last-Modified 发送给服务器，询问服务器在该时间后资源是否有更新，有更新就会将新的资源发送回来。

ETag / If-None-Match

• ETag：⽂件唯一表示（id）

• If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag 是否有变化，有的话就将新的资源发送回来。

今天就到这里了，有不对的地方希望大家多多指正，我是 Augus，一个爱瞎搞的软件开发工程师。END~~~