一、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、流程图

待补充。。。