HTTP请求流程,为什么站点第二次打开速度会快一些

177 阅读3分钟

如果浏览器第二次打开一些页面,速度会很快,主要的原因就是在第一次加载页面的时候,浏览器缓存了一些数据在本地,这就需要我们了解浏览器的缓存策略

强缓存

当客户端向服务器发送请求的时候,首先会检查本地缓存是否生效,如果生效,则会直接从本地缓存中读取对应信息。

如果本地缓存不生效,那么客户端会重新向服务器发送请求,服务器在返回请求信息的同时会在响应头携带两个字段:Expires(http1.0)和Cache-Control(http1.1)用来记录缓存的有效时间,浏览器在接受到响应信息后,除了渲染页面,还会将本次请求信息缓存在本地。

  1. 强缓存是服务器设置规则,客户端浏览器按规则去执行,如果服务器返回内容的同时并没有设置对应的字短,那么浏览器就不会缓存任何信息。
  2. 即使是从本地缓存中获取信息渲染,状态码返回也是200,从运行内存中获取是不需要时间的,但是从物理内存中获取是需要时间的,但是也要比从服务器获取资源快多了。

强缓存副作用

如果,客户端缓存了之前获取的资源信息,但是服务器端已将这个资源更新,此时客户端渲染的还是之前的内容,无法拿到最新的内容渲染

解决办法:

  1. html页面绝对不设置强缓存,因为他是一个页面渲染的入口(css、js、图片都是在渲染html过程中再次发送的请求),如果他做了强缓存,那么就彻底和服务器失去联系了。
  2. 如果其他资源有更新,我们在html中导入的时候,可以设置时间戳或者更新后的文件和之前的文件名保持不同即可

协商缓存

第一次请求资源的时候,客户端直接向服务器发送请求,服务器返回资源信息&“Last-Modified”:资源最后更新的时间「http1.0」和Etag(资源更新的一个标志)「http1.1」,浏览器接受信息渲染页面的同时,会把资源信息以及相关字段都在本地存储。

第二次或者第n次请求资源的时候,客户端会直接基于请求头(If-Modified-Since:Last-Modified和If-None-Match),服务器接收到请求信息后,会和服务器中当前资源更新的最新时间以及标志进行对比,如果资源未更新,则只会返回304状态码,此时客户端只需从本地缓存中读取资源,如果资源更新,则会返回200状态码,以及最新的资源和最新的Last-Modified和Etag字段,此时客户端按最新获取的信息渲染页面,并且把资源和相应字段缓存在本地。

由此我们可以知道,协商缓存可以保证获取到服务器的最新资源,但是需要向服务器发送请求,只是比每次都从服务器获取信息会快一点,但是如果解决了强缓存的副作用,我们是可以不向服务器发送请求的

引用一张图片,来更好的描述这个过程

image.png 通过上述,我们就可以很好的了解为何说呢吗站点第二次打开速度会快一点