0%

认识浏览器缓存

浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数web开发人员在工作过程不可避免的一大问题。浏览器缓存分为:强缓存和协商缓存

一、原理

  1. 浏览器加载资源时,先根据这个资源的http header中的Cache-Control判断是否命中强缓存,如果命中,浏览器直接从缓存中读取资源,根本不会向服务器发送请求;

  2. 当强缓存没有命中的时候,浏览器则会发送一个请求到服务器,通过资源的http header中的 Last-Modified 和If-Modified-Since来判断资源是否命中协商缓存,如果命中,服务器将会将这个请求返回,但不会返回这个资源的数据,而是告诉客服端可以从缓存中加载这个资源;

  3. 如果资源也没有命中协商缓存的话,浏览器直接从服务器端加载资源数据

二、共同点与区别

  1. 共同点:如果命中,都从客户端缓存中加载这个资源,而不从服务器端加载;   
  2. 区别: 强缓存不发请求到服务器,协商缓存发请求到服务器;

三、强缓存原理

命中强缓存,chrome里的network里面 status是200,且size会显示为from disk/memory cache,Cache Control :max-age:315360000 单位秒,也就是10年

  1. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Cache-Control的header

  2. 浏览器接收到这个资源后,会把这个资源连同所有的resoponse Header缓存下来

  3. 浏览器再次请求这个资源时,会从缓存中寻找,找到后,根据它第一次请求时间和Cache Control设定的有效期,计算一个过期时间。再拿这个过期时间跟当前请求时间比较,如果当前请求时间在过期时间之前,就能命中缓存。否则,就不行。

四、协商缓存原理

  1. 如果协商缓存命中,请求响应返回的http状态为304并且会显示一个Not Modified的字符串。协商缓存是利用的是【Last-Modified,If-Modified-Since】

  2. 浏览器第一次跟服务器请求一个资源,服务器在返回这个资源的同时,在respone的header加上Last-Modified的header,这个header表示这个资源在服务器上的最后修改时间

    浏览器再次跟服务器请求这个资源时,在request的header上加上If-Modified-Since的header,这个header的值就是上一次请求时返回的Last-Modified的值;

  3. 服务器再次收到资源请求时,根据浏览器传过来If-Modified-Since和资源在服务器上的Last-Modified是否有变化,如果没有变化则返回304 Not Modified,但是不会返回资源内容;如果有变化,就正常返回资源内容。

五、清除客户端缓存的方法

  1. 当ctrl+f5强制刷新网页时,直接从服务器加载,跳过强缓存和协商缓存;

  2. 当f5刷新网页时,跳过强缓存,但是会检查协商缓存;

  3. 如果用的是chrome,可以f12在network那里把缓存给禁掉 Disable cache

  4. 给资源加上一个动态的参数,css/index.css?v=2017032901