浏览器缓存概念

117 阅读3分钟

在前端开发中,缓存是一个非常重要的概念,可以帮助减少网络请求、提升性能、降低服务器负载等。

缓存

  1. 强缓存:强缓存是指在一定时间内,浏览器直接使用本地缓存,不发起请求。常用的强缓存机制有 Expires 和 Cache-Control。

    • Expires:指定缓存过期时间,是服务器返回的响应头中的一个字段,表示缓存将在该时间点后失效。缺点是依赖于客户端时间,如果客户端时间不准确,会导致缓存过期时间不准确。
    • Cache-Control:指定缓存的相关行为,是服务器返回的响应头中的一个字段,常见的值包括 max-age 和 no-cache。max-age 表示缓存的过期时间,单位是秒;no-cache 表示不缓存响应结果,但是仍然可以缓存请求和响应头部信息。
  2. 协商缓存:协商缓存是指在缓存过期后,浏览器向服务器发起请求,询问服务器是否有更新的资源。常用的协商缓存机制有 ETag 和 Last-Modified。

    • ETag:是一个字符串,由服务器生成,用于表示当前资源的版本号。浏览器每次请求该资源时,会带上 If-None-Match 请求头,表示当前资源的版本号,如果和服务器的版本号一致,服务器会返回 304 状态码,表示资源未被修改,可以使用本地缓存。
    • Last-Modified:是一个时间戳,表示当前资源的最后修改时间。浏览器每次请求该资源时,会带上 If-Modified-Since 请求头,表示当前资源的最后修改时间,如果和服务器返回的 Last-Modified 时间一致,服务器会返回 304 状态码,表示资源未被修改,可以使用本地缓存。

    区别

    强缓存是利用浏览器本地缓存来实现的,浏览器在第一次请求资源时,会将资源的一些相关信息(例如:过期时间、最后修改时间等)缓存在本地,并记录下来。下一次请求时,浏览器会检查该资源是否过期,如果没有过期,则直接从本地缓存中读取资源,不会向服务器发起请求。强缓存可以有效地减少请求的次数和网络带宽的消耗,提高网站的性能。

    协商缓存则是利用服务器端缓存来实现的,当浏览器向服务器请求某个资源时,服务器会根据该资源的相关信息(例如:过期时间、最后修改时间等)来判断该资源是否有更新。如果该资源没有更新,则服务器会返回一个 304 Not Modified 响应,告诉浏览器可以使用缓存中的资源,从而减少了网络传输的数据量和时间,提高了网站的性能。

    强缓存和协商缓存的区别在于强缓存的缓存时间是在浏览器端控制的,而协商缓存的缓存时间是在服务器端控制的。如果强缓存的缓存时间未过期,浏览器会直接使用本地缓存,不会向服务器发起请求;如果强缓存的缓存时间已过期,浏览器会向服务器发起请求,服务器会根据协商缓存的相关信息来判断是否需要返回更新的资源。因此,强缓存和协商缓存可以结合使用,以提高网站的性能和用户体验。