前端开发需要知道的网络知识——http缓存

62 阅读3分钟

  http缓存是Web开发必备的知识,在前后端分离的时代,http请求是前端的生命线。但是作为非科班的工科研究僧,没学过计算机网络的相关知识,却经常在面试中被问到,因此专门整理了相关内容,以输出作为学习的方式,希望自己能够加深理解。

一、关于缓存的介绍

  1. 什么是缓存   当浏览器访问一个网站时,有可能是第一次访问这个网站,需要去加载这个网站的资源,比如 html、css、js、img...等,让服务器返回相应的这些资源。在第一次之后再次请求这个网站,可能会请求同样的数据,这时候可以利用缓存策略,不重复之前的请求资源流程将所有的资源都完整的重新下载一遍。

  2. 为什么需要缓存 简单来说,就是为了让页面加载地更快一些,优化性能体验。

  3. 哪些资源可以被缓存 一般静态资源可以利用缓存策略,如js、css、img等资源。

  4. 服务端缓存策略 规定了浏览器从服务器获取资源的方式,分为强缓存和协商缓存。

二、强缓存/强制缓存(cache-control/expires)

请求过程

初次请求时,服务端除了会给浏览器返回请求的相应资源,还会给浏览器返回一个名为Cache-Control的响应头。

image.png 因此,在之后的请求中,浏览器会直接从本地缓存中读取相应的资源,提升页面的响应速度。 注意:

  1. Cache-Control在Response Header中,由服务端控制哪些资源要被缓存,浏览器仅仅负责存储相关的信息
  2. 写法:Cache-Control:max-age=31536000(单位是秒),如图为百度页面某个图片的cache-control。

image.png

缓存过期的话,与初次请求类似,浏览器向服务器发送请求。 image.png

cache-control的取值

  1. max-age:设置cache的时间
  2. no-cache:禁用本地缓存
  3. no-store:禁用本地和服务器缓存,一般不常用
  4. private
  5. public

expires

老标准,已被cache-control代替,与cache-control用法一致,但是为了兼容性,一般把这俩都写上。

三、协商缓存

  1. 概念 是一种服务器缓存策略;

服务器判断客户端资源,是否和服务端的资源一样;

如果一样则返回304,否则返回200和最新资源;

  1. 请求过程

image.png (1)初次请求:服务器返回资源和资源标识(Last-Modified)

(2)再次请求:浏览器发送的请求中携带着资源标识(If-Modified-Since),服务器收到请求后判断该资源标识所对应的资源是否发生更改(用代码表示:If-Modified-Since === Last-Modified ? 304 : new),如果没有发生更改,则返回304,浏览器页面的相关资源不更新,否则返回资源和新的Last-Modified

3.资源标识

  1. Last-Modified——资源的最后修改时间 image.png
  2. Etag——资源的唯一标识(一个字符串,类似人类的指纹) image.png
  3. 二者的区别

会优先使用Etag;

Last-Modified只能精确到秒级;

如果资源被重复生成,Last-Modified会改变但是Etag不变,因此Etag更加精确。

四、三种刷新操作对缓存的影响

  1. 正常操作:地址栏输入url、跳转链接、前进后退等

强制缓存和协商缓存都有效

  1. 手动刷新:F5、点击刷新按钮、右击菜单刷新

强制缓存失效,协商缓存有效

  1. 强制刷新:ctrl+F5/shift+command+2

强制缓存和协商缓存都失效

五、总结

image.png