一、Timing面板分析1、第一次加载图片浏览器第一次加载一张图片，是请求过程，可以通过F12查看。(1)Queuedat840.08ms：表示等待队列的时间（Queueing：排队时间）(2)Startedat840.66ms：表示开始处理图片（开始请求）(3)Stalled：开始建立一个connection（等待浏览器分配时间，等待0.96ms）（4）DNSLookup：dns解析所花费的时间（5）Initialconnection：与服务器建立连接（TCP握手）（6）SSL：时间建立https（超文本传输??协议，SSL证明）(7)Requestsent：发送请求的时间(8)Waiting：等待服务器响应(9)ContentDownload：接收响应数据的时间可以由此可见一张图片从请求到响应需要52.27ms，图片响应时间与队列进程、图片大小、缓存等有关2.304缓存加载图片当你设置expires和Cache-Control时图片缓存时间，再次请求图片，请求时间变为9.57ms，saves连接服务器和DNS查询的时间，这就用到了强缓存，当然浏览器也有协商缓存。当expires和cache-control时间到期时，它会请求服务器。服务器通过If-Modified-Since、Last-Modify、Etag、If-None-Match判断资源是否发生变化。如果改变，返回304使用本地缓存，否则返回200。二、优化措施1、DNSLookup使用DNS缓存；通过Connection:keep-alive特性建立持久连接，可以在当前连接上进行多次请求，无需域名解析；2.Request发送减少HTTP请求，可以使用CSSSetExpires3,Waiting(TTFB)使用CDN提高响应速度（缓存服务器直接响应用户请求）4.ContentDownload（下载）If-Modified-Since和Last-Modified、减小响应（304缓存响应）的大小去除重复的脚本，精简压缩代码，比如用grunt、gulp等自动化构建工具压缩响应内容，在服务端启用gzip压缩，可以减少下载时间3.NegotiationcachevsstrongCache缓存可以提高网页的整体加载速度，提升用户体验。同时缓存又分为浏览器缓存、本地缓存后端缓存、缓存使用等几个方面。本文主要讨论浏览器缓存。浏览器缓存分为强缓存和协商缓存。1、强缓存强缓存是通过expires和cache-control来决定是否使用缓存。1.expires设置响应头过期时间，在此期间使用缓存。2.Cache-Controlmax-age=600，在接下来的110分钟内，这个请求再次访问时会使用强缓存。Cache-Control:no-cache:不使用本地缓存。需要使用缓存协商与服务器确认返回的响应是否发生了变化。如果前面的响应中有ETag，则请求将与服务器进行验证。如果资源没有改变，可以避免重新下载。Cache-Control:no-store不在本地缓存数据。Cache-Control：public可以被所有用户缓存（多个用户共享），包括终端和CDN等中间代理服务器。Cache-Control:private只能被终端浏览2.协商缓存当expires和cache-control时间到期时，会请求服务器验证是否命中协商缓存。如果协商缓存命中，它将返回304状态代码并显示(NotModified)字符串。协商缓存由[If-Modified-Since,Last-Modify],[Etag,If-None-Match]决定。1.etag,If-None-Matchweb服务器响应请求时，告诉浏览器当前资源在服务器上的唯一标识（生成规则由服务器决定）。当服务器请求的资源发生变化时，etag也会随之更新。If-None-Matchheader会将上次返回的Etag发送给服务器，询问该资源的Etag是否有更新。如果有变化，将发回新资源。2.If-Modify-Since,Last-ModifyLast-Modify标识资源的最后修改时间。当浏览器再次请求该资源时，请求头中会包含If-Modify-Since，也就是缓存前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存。相当于每次请求收到的responseheader中返回etag和last-modified，在下一次请求的requestheader中带上这两个（If-Modify-Since,If-None-Match），服务器通过identification比较判断资源是否发生变化。如果资源没有改变，etag和last-modified不会改变。服务器返回304状态，客户端使用缓存。如果资源发生变化，则返回200并使用新资源。Last-Modify和etag，服务器会先检查etag，在etag相同的情况下比较Last-Modify，决定是否使用304缓存。3、状态码差异200：当缓存Expires/Cache-Control失效时，返回一个新的资源文件200（来自缓存）：缓存Expires/Cache-Control均存在且未过期，Cache-Control优先Expires，浏览器成功从本地获取资源304(NotModified)：协商缓存Last-modified/Etag未过期时，服务端返回状态码3043，流程图
