强缓存:当浏览器去请求某个文件的时候,服务端就在response header里面对该文件做了缓存配置,缓存时间、缓存类型等都由服务端控制
协商缓存:协商缓存是需要客户端和服务端进行交互的,客户端每次请求时会带上请求文件的标识,服务端对比标识是否修改,
如果资源没更改,返回304,浏览器读取本地缓存。
如果资源有更改,返回200,返回最新的资源。
以腾讯视频(腾讯视频 - 中国领先的在线视频媒体平台,海量高清视频在线观看)为例:
控制文件缓存的两个主要字段 cache-control 和 expires
cache-control字段
cache-control是HTTP1.0新增的字段,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private。
(图片来自:Cache-control_百度百科)
expires是HTTP1.0的字段,和cache-control中的max-age同时存在时,max-age优先
强缓存
当在max-age时间范围内时再次请求,则直接从缓存中取:
如图从缓存中取的文件会返回200,并且标明取自缓存(from xxxx cache)
from memory cache是指从内存中取的,一般js文件会缓存在内存,因为缓存在disk中,读取的话需要IO操作,而js文件随时可能执行,会降低效率。
from disk cache是指从磁盘中读取的,一般css文件会缓存在磁盘,因为样式文件一般只加载一次
协商缓存
当过了max-age的时间后,浏览器需要和服务器确认资源有效性
同样是腾讯视频网站(腾讯视频 - 中国领先的在线视频媒体平台,海量高清视频在线观看),我们看下这个main.js,浏览器发送修改时间和服务端进行校验
304表示资源未更新,可以用缓存的文件
200则表示文件更新了,并返回最新资源
~~~