共计 2352 个字符，预计需要花费 6 分钟才能阅读完成。
一、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、流程图
待补充。。。