浏览器缓存机制

438 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

简介

浏览器缓存机制是我们常见的面试问题,也是开发过程中的必备知识,这篇文章一起来梳理一下~

先上一张自己画的大图

1004427-20190908133845078-1022321739 (1).png

缓存的几个位置

  • from disk cache: 从硬盘中读取缓存
  • from memory cache: 从内存冲读取缓存

两种都只能读取一些派生类文件,比如 html 中引入的一些外部资源

浏览器缓存的判断方法

对应上面的大图,可以看到浏览器缓存的判断方法。

Cache-Control

首先判断 Cache-Control

// 接下来 2592000 秒可以重用这个响应
Cache-Control: max-age=2592000

// 每次都先和服务器确认资源是否变化,没变化则不下载
Cache-Control: no-catch

// 每次都请求服务器并下载
Cache-Control: no-store

Etag

如果 Cache-Control 是 max-age,且超出了设置的时间,会判断 Etag,Etag 是当前文件的唯一标识,有服务器制定生成规则(文件索引+大小+修改时间hash)

向服务器发送请求,请求头带

If-None-Match: Etag

服务器返回 200,表示文件过期,返回 304 表示文件没有过期

Last-Modified

如果没有 Etag,会判断是否有 Last-Modified,请求头带

If-Modify-Since: 时间精确到秒

服务器返回 200,表示文件过期,返回 304 表示文件没有过期

以上是浏览器缓存机制的小知识点,可以看上面的大图对照学习,欢迎点赞和评论~