Web 缓存大致可以分为:**数据库缓存、服务器端缓存(**代理服务器缓存、CDN 缓存)、浏览器缓存。
浏览器缓存也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。
indexDB
一般**>=250M**,并且用户清除浏览器缓存时不会将其清除。支持事务、异步的 、同源限制、支持二进制储存。
流程:打开数据库,然后创建库表,然后可以增删改查操作。
http缓存
概念
http缓存就是在浏览器从服务端拿到请求的资源,通过缓存规则保存在浏览器本地,二次请求的时候不再从服务端获取,而是直接从本地获取缓存资源,降低了服务器压力,提升了加载速度
缓存规则
1、强制缓存
首次请求服务端资源时,服务端会在Response Headers 中写入缓存时间。当请求再次发出时
如果缓存时间内,将直接从缓存获取资源,而不会再与服务器发生通信。
如果不在缓存时间内,与服务器发生通信。
Cache-Control:Cache-Control 是 Expires(已废弃) 的替代方案,可以有几个值:
max-age : 单位秒,缓存在这个max-age最大时间内有效
no-cache:跳过强制缓存,采用协商缓存
no-store:完全不缓存
2、协商缓存
协商缓存机制下,浏览器需要向服务器去询问缓存的相关信息,进而判断是重新发起请求,还是从本地获取缓存的资源。
两个控制字段:
Last-Modified:标识的是资源在服务器上的最后修改时间,当第一次请求的时候,服务会返回 Last-Modified ,当再次请求的时候请求头会带上 If-Modified-Since:xx(第一次请求返回的 Last- Modified的值),服务器会对比资源在最后修改时间之后是否有变动,有则返回新的资源,没有则返回 304
Etag:Etag 是由服务器为每个资源生成的唯一的标识字符串,当第一次请求的时候,服务会返回 Etag 值 ,当再次请求的时候请求头会带上 if-None-Match:xx(第一次请求返回的 Etag 的值),这个标识字符串是基于文件内容编码的,只要文件内容不同它们对应的 Etag 就是不同的,因此 Etag 能够精准地感知文件的变化,Etage也是Last-Modified的替代方案
缓存读取
from memory cache代表使用内存中的缓存(快速读取和时效性)
rom disk cache则代表使用的是硬盘中的缓存(I/O)
浏览器会在js和图片等文件解析执行后直接存入内存缓存中,那么当刷新页面时只需直接从内存缓存中读取(from memory cache);而css文件则会存入硬盘文件中。所以每次渲染页面都需要从硬盘读取缓存(from disk cache)。