本文内容总结：1什么是Web缓存？为什么要使用它？2Web缓存的种类3浏览器缓存基础知识3.1Expires3.2Last-modified3.3Cache-Control3.4ETag4浏览器缓存机制4.1强缓存应用4.2协商缓存应用4.3强缓存和协商缓存的区别5浏览器缓存流程6浏览器缓存优化1什么是Web缓存？为什么使用它Web缓存是在服务器和客户端之间。服务器可能是源站服务器（因为中间可能有代理服务器），也就是网站资源所在的服务器。客户端是指我们的浏览器。Web缓存是在服务器和客户端之间进行监督，监督请求，并将请求的结果传递给浏览器进行显示，并存储另一个副本（我们称之为副本，即缓存）。那么，下次我们请求相同的URL路径时，我们直接请求保存的副本（缓存），而不是再次从源服务器获取数据。缓存的好处：优秀的缓存策略可以缩短网页请求资源的距离，从而减少延迟时间，并且由于缓存文件可以重复使用，还可以降低带宽和网络负载。Tips：带宽是指单位时间内（一般为1秒）可以传输的数据量。该网络类似于高速公路。带宽越大，高速公路的车道越多，对等能力越强。欢迎交流~HTML5派（Codesmith）2Web缓存的种类2.1当浏览器缓存通过HTTP协议与服务器进行交互时，浏览器会按照与服务器约定的一套规则进行缓存工作。2.2代理服务器缓存代理服务器是浏览器和源服务器之间的中间服务器。浏览器首先向中间服务器发起Web请求，经过处理（如授权验证、缓存匹配等）后，将请求转发给源服务器。2.3数据库缓存当web应用的逻辑比较复杂时，频繁的数据库查询很容易造成数据库不堪重负。为了提高查询的性能，将查询到的数据缓存在内存中，下次查询直接从内存缓存中返回，提高响应效率。2.4应用层缓存通过代码逻辑缓存之前请求的数据，当再次需要数据时通过逻辑处理选择可用的缓存数据。今天要给大家讲解的是浏览器缓存。我们先来看看浏览器缓存的基础知识。3浏览器缓存基础知识浏览器的缓存状态由HTTP头部决定，它有四个参数：Expires、Last-modified、Cache-Control、ETag；3.1expires缓存过期时间，用于指定资源过期时间是服务器端的具体时间点。在响应http请求时，告诉浏览器在过期时间之前，浏览器可以直接从浏览器缓存中取数据，不需要再次请求。3.2Last-modified服务器端文件的最后修改时间，需要和Cache-Control配合使用，是一种检查服务器端资源是否更新的方式。浏览器再次请求时，会向服务器发送If-Modified-Since头，询问在Last-Modified时间点之后资源是否有修改。如果没有修改过，返回码为304，使用缓存；如果修改过，会去服务器再次请求资源，返回码为200，与第一次请求相同，资源为服务器的最新资源。3.3Cache-Controlmax-age（单位为s）：指定设置缓存的最大有效时间，定义了时间长度。例如Cache-Control:max-age=200表示该文件在浏览器中缓存，有效时长为200秒（从请求发出时开始计算）。在接下来的200秒内，如果再次请求资源，浏览器不会向服务器发送HTTP请求，而是直接使用浏览器缓存的文件。3.4ETagETag与Last-Modified相同，是标识文件的字段。不同的是，ETag是根据实体的内容生成一个hash字符串来标识资源的状态，由服务器生成。在向服务器查询文件是否更新时，浏览器通过If-None-Match字段向服务器发送特征串（hash字符串），服务器匹配文件的最新特征串来判断文件是否更新已更新。没有更新返回304，更新返回200。ETag和Last-Modified可以根据需要同时使用一个或两个。当两者同时使用时，只要满足base中的其中一个条件，就认为该文件不被更新。3.5四个参数的比较欢迎交流~HTML5派（Codesmith）4浏览器缓存机制4.1强缓存应用1当浏览器第一次向服务器请求资源时，当服务器返回资源时，添加添加的header到期；2浏览器收到这个资源后，会把这个资源和所有的响应头一起缓存起来（所以一个符合条件的缓存请求返回的头不是来自服务器，而是来自之前缓存的头）；3浏览器再次请求该资源时，首先从缓存中查找。找到资源后，将其Expires取出来，与当前请求时间进行比较。如果请求时间早于Expires指定的时间，则满足缓存要求。请求资源；4如果不满足缓存要求，当浏览器直接从服务器加载资源时，重新加载时会更新ExpiresHeader；Expires的一个缺点是返回的过期时间是服务器端的时间，所以有一个问题，如果客户端的时间和服务器的时间相差很大（比如：客户端的时间是2016.07.0121:05.07，而服务器时间是2016.07.1212:15.07，缓存过期时间是2016.07.2320:05.07，会造成延迟过期），那么误差就大了。另一个问题是您很容易忘记为某个内容设置特定时间。如果在返回内容时不更新过期时间（Expires），则每次请求都访问服务器，增加了负载和响应时间。所以从HTTP1.1版本开始，改用Cache-Control:max-age。注意：max-age根据第一次请求时间和Cache-Control设置的有效期计算出一个资源过期时间，然后将这个过期时间与当前请求时间进行比较。如果请求时间在过期时间之前，就满足缓存要求，否则不工作。当Expires和Cache-Control同时存在时，Cache-Control的优先级高于Expires；强缓存通常用于静态资源，动态资源需要谨慎使用。除了服务端页面可以看成是动态资源外，引用静态资源HTML的也可以看成是动态资源。如果这种HTML也被缓存起来，当这些HTML更新时，可能没有机制通知浏览器这些HTML已经更新了，尤其是在前后端分离，页面都是纯HTML的应用中.页面，每个访问地址都可能直接访问到html页面，而这些页面通常不会加强缓存以保证浏览器在访问这些页面时总是向服务器请求最新的资源。4.2协商缓存应用1浏览器第一次向服务器请求资源。当服务器返回资源时，它会在响应头中添加一个Last-Modified头。这个头表示资源在服务器上的最后修改时间；2浏览器再次向服务器请求该资源时，在请求头中加入If-Modified-Since头。这个header的值为上次请求返回的Last-Modified的值；3、当服务器再次收到资源请求时，根据浏览器发送的If-Modified-Since和资源在服务器上的最后修改时间，判断资源是否发生变化。如果没有变化，则返回304NotModified，但不返回资源内容；如果有变化，资源将正常返回内容。当服务器返回304NotModified响应时，Last-Modified头不会被添加到响应头中，因为既然资源没有改变，Last-Modified就不会改变。这是服务器返回304时的响应头；4浏览器收到304响应后，会从缓存中加载资源；5如果浏览器不满足协商缓存要求，当浏览器直接从服务器加载资源时，重新加载时会更新Last-ModifiedHeader，下次请求时，If-Modified-Since会启用Last-ModifiedHeader上次返回的值。Last-Modified和If-Modified-Since都是根据服务器时间返回的header。一般来说，如果不调整服务器时间，不篡改客户端缓存，用这两个头来管理协商缓存是非常靠谱的。但有时服务器上的资源实际上发生了变化，但最后修改时间并没有发生变化，这种问题不容易定位，而且发生这种情况时，会影响协商缓存性的可靠性。因此，还有另一对标头来管理协商缓存。这对标头是ETag和If-None-Match。1浏览器第一次向服务器请求资源。当服务器返回资源时，它会将ETag标头添加到响应标头中。这个头是服务器根据当前请求的资源生成的唯一标识符。这个唯一标识是一个String，只要资源发生变化，这个字符串就是不同的，与最后修改时间无关，所以可以补充Last-Modified问题；2当浏览器再次向服务器请求该资源时，在请求的头部添加If-None-Match头部，该头部的值为上次请求返回的ETag的值；3当服务端再次收到资源请求时，会根据浏览器传过来的If-None-Match再根据资源ETag生成一个新的，如果两个值相同，则表示resource没有变化，否则有变化；如果没有变化，则返回304NotModified，但不返回资源内容；如果有变化，资源内容会正常返回。与Last-Modified不同，当服务器返回304NotModified响应时，由于已经重新生成了ETag，因此即使ETag与之前的没有变化，也会在响应头中返回ETag；4浏览器收到一个304响应后，会从缓存中加载资源；注意：大多数web服务器默认开启协商缓存，同时也会开启Last-Modified和If-Modified-Since、ETag和If-None-Match。这也是为了处理Last-Modified不可靠；协商缓存需要和强缓存配合使用，因为如果不开启强缓存，协商缓存就没有意义；4.3强缓存和协商缓存的区别有一个共同点：如果条件满足，都是从客户端缓存从服务端加载资源，而不是从服务端加载资源数据；区别：强缓存不向服务器发送请求，协商缓存会向服务器发送请求；5浏览器缓存的过程6浏览器缓存的优化Last-Modified需要发送给服务器只有查询请求才能知道资源文件是否更新过。虽然服务器可能会返回304告诉没有更新，但是还是有一个请求过程。对于移动网络，此请求可能很耗时。有一种说法叫做“消除304”，指的是优化304请求。在实际应用中，为了解决Cache-Control缓存时长设置不好的问题，达到“消除304”的目的，Web前端采用的方法是：1在资源文件名中加入文件MD5值字符串到缓存，比如common.d5d02a02.css，设置Cache-Control:max-age=31536000，即一年。一年内，如果资源文件有本地缓存??，则使用该缓存；不会有304退货包。2如果修改了资源文件，更新文件内容的同时修改资源文件名，如common.d5d02a02.cs，html页面会引用新的资源文件名。学习资料：流云诸葛张鑫旭-鑫空间-鑫生活大哼唱等夕阳博客腾讯全端AlloyTeam团队博客欢迎交流~HTML5学堂（coder）
