vue 一张图片的缓存日记

一、Timing面板解析

1、首次加载图片

浏览器首次加载一张图片，这是通过F12可以查看它的请求过程。

（1）Queued at 840.08ms：表示等待队列的时间（Queueing：排队的时间）
（2）Started at 840.66ms：表示图片开始被处理（开始请求）
（3）Stalled：开始建立连接（等待浏览器分配的时间，等待了0.96ms）
（4）DNS Lookup：dns解析花费的时间
（5）Initial connection：与服务器建立连接（TCP握手）
（6）SSL：建立https的时间（超文本传输协议、SSL校验加密）
（7）Request sent：请求发送的时间
（8）Waiting：等待服务器的响应
（9）Content Download：接收响应数据的时间

由此可以看出，一张图片从请求到响应花费了52.27ms，图片响应的时间跟队列进程有关、以及图片的大小、缓存等。

2、304缓存加载图片

当给图片设置了expires、Cache-Control缓存时间，再次请求图片时，请求的时长就变成了9.57ms，节省了连接服务器和DNS查询的时间，这是使用了强缓存，当然浏览器还有协商缓存，当expires、cache-control时间过期时，会去请求服务器，服务器通过If-Modified-Since，Last-Modify，Etag、If-None-Match判断资源是否更改、资源没更改则返回304使用本地缓存、否则返回200。

二、优化措施

1、DNS Lookup

• 使用DNS缓存；
• 通过Connection:keep-alive特性建立持久连接，可以在当前连接上进行多个请求，无需再进行域名解析；

2、Request sent

• 减少HTTP请求，可以使用CSS Sprites、内联图片、合并脚本和样式表等
• 设置Expires

3、Waiting(TTFB)

• 使用CDN，提高响应速度（由缓存服务器直接响应用户请求）

4、Content Download（下载）

• If-Modified-Since和Last-Modified，减小响应的大小（304缓存响应）
• 移除重复脚本，精简和压缩代码，如借助自动化构建工具grunt、gulp等
• 压缩响应内容，服务器端启用gzip压缩，可以减少下载时间

三、协商缓存 vs 强缓存

缓存可以提高网页整体的加载速度、提高用户体验。同时，缓存又分为浏览器缓存、本地缓存
后端缓存、缓存使用等几个方面，本文主要探讨浏览器缓存。

浏览器缓存又分为强缓存、协商缓存。

1、强缓存

强缓存是通过expires、cache-control决定是否使用缓存。

1、Expires

设置response header失效时间，在这个期间使用缓存。

2、Cache-Control

max-age=600，在接下来的110分钟内，这个请求再次访问时使用强缓存。

Cache-Control: no-cache：不使用本地缓存。需要使用缓存协商，先与服务器确认返回的响应是否被更改，如果之前的响应中存在ETag，那么请求的时候会与服务端验证，如果资源未被更改，则可以避免重新下载。
Cache-Control: no-store才是真正的不缓存数据到本地
Cache-Control: public可以被所有用户缓存（多用户共享），包括终端和CDN等中间代理服务器
Cache-Control: private只能被终端浏览器缓存（而且是私有缓存），不允许中继缓存服务器进行缓存

2、协商缓存

当expires、cache-control时间过期时，会去请求服务器，验证协商缓存是否命中，如果协商缓存命中则返回304状态码并且显示（Not Modified）字符串。

协商缓存是通过【If-Modified-Since，Last-Modify】，【Etag、If-None-Match】来决定的。

1、etag、If-None-Match

web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。服务器端请求资源发生改变时，etag也会被更新。
If-None-Match的header会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新，有变动就会发送新的资源回来

2、If-Modify-Since、Last-Modify

Last-Modify标识该资源的最后修改时间，当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。

相当于每次请求返回接收的response header 中的 etag和 last-modified，在下次请求时在request header 就把这两个带上（If-Modify-Since，If-None-Match），服务器通过标识进行对比判断资源是否更改，如果资源没更改，则etag、last-modified也就不发生改变，服务器返回304状态、客户端使用缓存，如果资源更改，则返回200，使用新资源。

Last-Modify和etag，服务器会先校验etag，etag相同的情况下去对比Last-Modify，来决定是否使用304缓存。

3、状态码区别

200：强缓Expires/Cache-Control存失效时，返回新的资源文件
200(from cache): 强缓Expires/Cache-Control两者都存在，未过期，Cache-Control优先Expires时，浏览器从本地获取资源成功
304(Not Modified )：协商缓存Last-modified/Etag没有过期时，服务端返回状态码304

3、流程图

待补充。。。