浏览器缓存策略

!!!!自己学习理解用,仅供参考!!!!

浏览器缓存策略分为两种 强缓存(本地缓存) 和 协商缓存(弱缓存)。
浏览器在发请求前,先检查强缓存,若没有需要的内容(未命中),则发起请求判断是否需要用弱缓存。

1、简单的概括

强缓存是不发起请求,直接使用缓存内的内容的。浏览器将jscssimagefont-family等存到内存(存小文件)或者磁盘(存大文件)中,下次用户再访问的时候就从内存中取,以便提升性能。
协商缓存需要往后台发请求, 通过判断来决定是使用协商缓存。如果请求内容没发生变化,则请求返回304(服务器收到请求,但内容无变化),浏览器就用缓存内的内容。

2、强缓存如何触发

http1.0 使用 Expires 响应标头

如果服务器返回的响应标头中包含Expires(时间戳),那么客户端发起请求的时间在Expires之前的话,就触发强缓存。

http1.1 使用 Cache-Control 响应标头

同样是服务器返回的一个响应标头, 提供一些配置选项,其优先级比Expires高。(来源:百度百科)

cache-control.png

常用的配置就是 publicprivatemax-age。 下面这个例子是从某个网站的请求中copy来的,仅供参考。

  cache-control: 'private, must-revalidate, no-cache, no-store, max-age=0, post-check=0, pre-check=0'

3、协商缓存怎么触发

http1.0 使用 请求头:If-Modified-Since , 响应头:Last-Modified

服务器在上一次响应请求时,返回一个带Last-Modified的响应头,值为一个时间戳,表示该资源最后一次在服务器修改的时间。当客户端再一次请求这个资源的时候, 请求头就会带上If-Modified-Since,值为上次服务器发来的Last-Modified, 服务器收到后,就和该资源最后修改时间比对, 没变化就返回304, 触发协商缓存。
弊端: 时间间隔最小为1s,如果请求的资源在1s内发生了改变,是可能会触发协商缓存的, 导致无法获取到最新的资源。

http1.1 使用 请求头:If-None-Match , 响应头: Etag

为解决间隔最小1s的问题, If-None-MatchEtag就诞生了。 Etag是由服务器生成的, 是每个资源的唯一标识字符串, 随资源变化而改变。 判断过程和http1.0的一致,请求的时候携带 If-None-Match,然后服务器比较这两个值,没变化就返回304, 触发协商缓存。
弊端: 占用服务器资源较多, 虽然准确度高,但是性能上不如Last-Modified & If-Modified-Since的方法。不过实际的影响不会很大, 基本上可以忽略不计。

补充

即便我们没有配置缓存策略,浏览器也会采用自己的算法来缓存资源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 今天看奇舞团推了篇文章讲缓存策略的,讲的挺不错,记录一下。 原文地址就在下面。 总结: 缓存分为强缓存和协商缓存...
    NowhereToRun阅读 10,313评论 1 7
  • 关于缓存策略 自动化的缓存机制(基于服务端和客户端协商的) 分级缓存策略(3层):(1层)200状态 : 当浏览器...
    达文西_Huong阅读 1,950评论 0 0
  • 在前端开发中,性能一直是被大家所重视的一点,然而判断一个网站的性能最直观的就是看网页打开的速度。其中提高网页反应速...
    meow_possion阅读 5,309评论 0 0
  • 最近在对项目做 IE 11 兼容,由 IE 的缓存问题,引发我对于浏览器缓存策略的思考。 缓存类型 web缓存主要...
    丶chlorine阅读 4,328评论 0 1
  • 今天的主题让我想起了过去的无知和愚蠢,不过谁不是一点点进步的了~ 有一次,向开发提了一个web端的bug,回归后还...
    最爱西红柿阅读 3,038评论 0 0

友情链接更多精彩内容