作为一个前端开发者，对于我们的网站或者应用的缓存机制，我们似乎无能为力，但这些都是我们关心的与性能息息相关的部分，而且站点没有做任何缓存机制，我们的页面可能会因为资源的下载和渲染而变得很慢，但是大家都知道去前端解决页面慢的问题而不是去服务器——方开发商。因此，了解相关的缓存机制并充分利用它似乎很有必要。Web端其实有很多种缓存机制。刚刚学习并整理了这里以浏览器为载体的HTTP缓存机制，看看它是如何工作的。一、Web缓存的种类1.1数据库缓存我们可能听说过memcached，它是一种数据库级别的缓存解决方案。数据库缓存是指当web应用的关系复杂，数据库中的表很多时，如果频繁查询数据库，很容易导致数据库不堪重负。为了提高查询的性能，将查询到的数据缓存在内存中，下次查询时直接从内存缓存中返回，提高响应效率。1.2CDN缓存CDN缓存一般由网站管理员自行部署，目的是为了让自己的网站更容易扩展，获得更好的性能。通常情况下，浏览器首先向CDN网关发起Web请求，网关服务器对应一台或多台负载均衡的源服务器，这些源服务器会根据自己的负载请求动态转发请求到合适的源服务器。从浏览器的角度来看，整个CDN就是一个源服务器。从这个角度来说，浏览器和服务器之间的缓存机制在这种架构下也是适用的。1.3代理服务器缓存代理服务器是浏览器和源服务器之间的中间服务器。浏览器首先向中间服务器发起Web请求，经过处理（如授权验证、缓存匹配等）后，将请求转发给源服务器。代理服务器缓存的工作方式与浏览器的工作方式大致相同，只是规模更大。1.4浏览器缓存每个浏览器都实现了HTTP缓存。当我们使用HTTP协议通过浏览器与服务器进行交互时，浏览器会根据与服务器约定的一套规则进行缓存工作。1.5应用层缓存应用层缓存是指我们在代码层面做的缓存。通过代码逻辑，缓存已经请求过的数据或资源，当再次需要数据时，通过逻辑处理选择可用的缓存数据。2、为什么需要浏览器缓存？我们需要做什么？我们知道，通过HTTP协议，客户端和浏览器之间建立连接是需要时间的，而一个大的响应需要客户端和服务器进行多次往返通信才能获得完整的响应，这就延迟了浏览器的响应能力使用和时间来处理内容。这增加了访问服务器数据和资源的成本，因此利用浏览器的缓存机制来复用之前获取的数据成为性能优化中需要考虑的事情。那么有什么建议吗？当然。为每个资源指定一个明确的缓存策略，它定义了该资源是否可以被缓存、由谁缓存、缓存多长时间以及缓存时间到期时如何有效地重新生效。服务器返回响应时，需要在响应头中提供Cache-Control和ETag。说到浏览器中的缓存机制，其实就相当于HTTP协议定义的缓存机制，因为浏览器帮我们实现了。一般来说，我们会想到HTTP响应头中的Expires、Cache-Control、Last-Modified.If-Modified-Since、Etag等缓存相关的响应头信息。但是这里我们说服务器可以在返回响应时提供必要的Cache-Control和Etag。为什么是这样？因为Cache-Control和Expires的作用是一样的，所以Last-Modified和ETag的作用也差不多。但它们有以下区别：现在默认浏览器默认使用HTTP1.1，所以Expires和Last-Modified的作用基本可以忽略，只需要Cache-Control和Etag。当然，用户的行为也会影响浏览器的缓存，像这样：但是我们先不考虑用户操作的影响，我们先看看服务端是如何提供缓存的Cache-Control和ETag响应头的。 3。使用Etag验证缓存的HTTP响应。通常情况下，请求一个资源的过程大概是这样的：我整理了Ajax中HTTP请求的请求头和响应头的一些参数。下面我们就来看看Etag的作用。3.1Etag的主要作用服务器通过ETagHTTP头传递验证码，这个头大概是''x123cef''这样的字符串。当资源过期后浏览器再次请求时，浏览器默认会通过If-None-Match传递Etag的验证码，通过验证码可以进行高效的资源更新检查：如果资源没有变化，则没有数据将被传输。Etag主要用于验证响应过期后资源是否被修改。3.2Etag的工作原理如上图所示。服务器第一次返回response时，缓存时间设置为120s。假设浏览器在120s之后再次向服务器请求相同的资源。首先，浏览器会检查本地缓存并找到以前的，不幸的是现在已经“过期”并且不能再使用了。这时候浏览器也可以直接发出新的请求来获取新的完整响应，但是这样效率较低，因为如果资源没有改变，我们没有理由去下载和已经存在的完全相同的词缓存。节日。因此，是时候让Etag发挥作用了。通常服务器在Etag中生成并返回验证码，通常是文件内容的哈希值或其他一些指纹代码。客户端不需要了解指纹码是如何产生的，只需要在下次请求时发送给服务端即可（浏览器会默认加上）：如果指纹码还是一致的，说明资源没有被修改，服务器会后悔304NotModified，所以我们可以跳过下载，使用已经缓存的资源，资源会继续缓存120s。就像这样：4.什么是Cache-Control？如何定义缓存控制？服务器响应浏览器请求时的响应头中的Cache-Control响应头使得每个资源都可以通过Cache-ControlHTTP头来定义自己的缓存策略。Cache-Control指令是用来告诉我们这个资源在什么条件下可以缓存，可以缓存多长时间。4.1Cache-Control头参数的含义（响应头中的Cache-Control）1no-cache：表示必须先与服务器确认返回的response是否发生了变化，然后才能使用response满足后续请求相同的网址。因此，如果存在合适的验证令牌(ETag)，则no-cache会发起一次往返以验证缓存的响应，从而避免在资源未更改的情况下进行下载。2no-store：不缓存任何响应，也就是说，用户每请求一个资源，都会向服务器发送一个请求，每次都会下载完整的响应。3public：如果响应被标记为public，那么即使有关联的HTTP认证也可以缓存响应，即使响应状态码不能正常缓存。4private：浏览器可以缓存私有响应，但通常只为单个用户缓存，所以不允许代理服务器缓存。例如，用户的浏览器可以缓存包含用户隐私信息的HTML网页，但CDN不能。5max-age:用于设置资源被缓存的最长时间（以秒为单位）。4.2如何使用Cache-Control一般情况下，我们可以通过下图的流程设置相应响应头的Cache-Control头。5.如何更新或丢弃缓存的响应？通常，浏览器发出的所有HTTP请求首先会路由到浏览器的缓存中，以查看是否存在可用于完成请求的缓存有效响应。如果有匹配的响应，则直接从缓存中读取响应，从而避免传输带来的网络延迟和数据成本。但是，如果我们希望更新或丢弃缓存的响应怎么办？假设我们已经告诉我们的访问者某个CSS样式表最多缓存24小时(max-age=86400)，但是设计者刚刚提交了我们希望所有用户都可以使用的更新。我们如何通知所有访问者缓存的CSS副本已过期并且需要更新缓存？实际上，之前没有请求过资源的新用户，会得到更新后的资源，但是请求过资源的用户，一直会得到旧的缓存资源，一直到过期时间，直到他手动清除浏览器的缓存。手动清除浏览器缓存可能只有程序员才能完成，那么我们该怎么做才能让用户获得更新的资源呢？其实很简单。资源内容改变后，我们可以改变资源的URL，强制用户下载新的响应。比如在资源链接后面添加参数：6.对于缓存机制，现在可以做些什么？浏览资料时发现了一个缓存检查表，有参考价值。我们可以按照以下建议合理使用缓存机制：1使用一致的URL：如果在不同的URL上提供相同的内容，则会多次获取并存储相同的内容。提示：URL区分大小写！2确保服务器提供身份验证代码(ETag)：有了身份验证代码，如果服务器上的资源未更改，则不必传输相同的字节。3确定哪些资源可以被代理缓存缓存：对所有用户响应完全相同的资源很适合被CDN或其他代理缓存缓存。4确定每个资源的最佳缓存周期：不同的资源可能有不同的更新需求。查看并确定每个资源的适当max-age。5确定站点的最佳缓存层：使用包括内容指纹和HTML文档的短或无缓存生命周期的资源URL的组合可以控制客户端获取更新的速度。6.最小变化：一些资源比其他资源更频繁地更新。如果资源的特定部分（例如JavaScript函数或一组CSS样式）经常更新，请考虑将其代码作为单独的文件提供。这样，每次获取更新时，都可以从缓存中获取剩余的内容（例如不经常更新的库代码），确保下载的内容量最少。
