前端缓存分类
- HTTP缓存（指HTTP请求时候用到的缓存，主要在服务器端进行设置）
- 浏览器端的缓存（本地缓存技术）
HTTP缓存介绍
1.HTTP大体请求过程如下：
- 浏览器输入域名
- DNS解析
- 根据IP访问服务器
- 响应服务资源
- 使用HTTP主要是发起请求和返回请求，以及下载资源过程中消耗的时间。我们希望在第二次以发起HTTP请求以后，尽量的减少请求流程时间和资源下载时间，于是就有了HTTP缓存技术的研究。
2.HTTP缓存方式
- 缓存分为 “强缓存”和 “协商缓存”
- 强缓存
- 指的是缓存位置在本地浏览器不会在经过浏览器
- 状态码 200，分为 from memory cache （不访问服务器，直接从内存中读取缓存，关闭浏览器以后数据消失），from disk cache (不访问服务器，从磁盘中读取，关闭浏览器数据还在，ctrl+f5 强刷会重新请求)
请求头/返回头 值 优先级 缺点 Pragma no-cache: 不直接使用缓存，请求服务器由服务器判断是否使用缓存 中 已经被废弃(HTTP1.0标准) cache-control no-cache:同Pragma
no-store: 指示缓存不存储此次请求的响应，每次都下载最新资源
max-age:value=秒,表示时间内不在请求服务器，而是使用本地缓存，如果等于0则直接请求服务器
public/private: 是否只能被单个用户保存高 无 Expires（response header） 表示缓存过期的时间采用GMT时间，例如expires:Wed Oct 24 2018 14:52:45 GMT,如果碰见cache-control的max-age会被max-age覆盖 低 服务器和本地时间不一定统一
- 协商缓存
- 指的是不符合强缓存的时候，与服务器协商。发http请求到服务器，如何符合规则（即服务器资源与本地相同），返回304，不再返回资源内容；否则返回200和资源内容，然后更新缓存头信息。
- 状态码 304 Not Modified ，表示访问服务器并没有资源更新，从本地缓存读取资源。
请求头/返回头 值 缺点 if-modified-since/last-modified if-modified-since(请求头)GMT时间，再次请求的时候会将last-modified字段赋值给它。
last-modified(响应头)表示文件的最后一次修改时间
两者同时出现，目的是为了告诉服务器在这个时间之后对资源是否进行了改良，来决定是否使用缓存资源if-none-match/Etag if-none-match（请求头）hash字符串，再次请求的时候会将eTag的值赋值给它
Etag(响应头)hash字符串，资源改变以后Etag也会随之改变
服务器根据资源是否改变来决定是否使用缓存资源使用系统的hash算法，在分布式部署中可能会出现不同服务器Etag值不一致的问题
浏览器缓存
- 指的是浏览器端的缓存技术(主要有cookie，localStoreage，sessionStorage，indexDB)
类型 介绍 容量 cookie 用于存储用户信息，在请求的时候会自动传递给服务器 4k LocalStorage 数据一直存储在浏览器，直到用户清除为止，同域不同页签可共享 一般5M以上 SessionStorage 使用方式类似于LocalStorage，页签关闭清除，同域不同页签中数据修改不会互相影响 一般5M以上 indexDB 非关系型数据库，一直存在直到用户清除，用于大数据存储 50M以上
缓存原理
- 先从内存查看，然后硬盘再然后网络请求，每个阶段如果符合规则则返回资源
网友评论