浏览器缓存机制
本质上是浏览器缓存资源或页面等 在一定的时间再次请求 直接读取缓存上的资源
好处
- 减少请求次数 降低服务器端的压力
- 大大减低请求响应时间 提升用户的体验感
（HTTP缓存）
-
强缓存 是根据本地缓存资源的header（expires 和 cahe-control）中的信息判断是否命中 如果命中则直接使用缓存中的资源 就不需要在向服务器发送请求
-
cahe-control（http1.1）
-
优先级大于expire
-
常用的设置值
- max-age 记录的是相对时间 单位为秒
- no-cache 该资源需要进行协商缓存
- no-store 该资源禁止缓存 每次都要重新请求
- public 可以对所有用户缓存 包括终端用户和CDN等中间代理服务器
- private 只能终端用户的浏览器缓存
-
-
expires（http1.0）
- 记录的是绝对时间
-
-
协商缓存 是根据header中的信息 Last-Modify/If-Modify-Since 和 ETag/If-None-Match
-
Last-Modify/If-Modify-Since
浏览器在第一次请求时 服务器会返回的header中会有 Last-Modify 代表着一个时间标识该资源的最后修改时间
当浏览器再次请求 request中请求头带有 If-Modify-Since 值为上一次的Last-Modify 服务器会根据该资源的最后修改时间判断是否命中缓存 如果命中直接返回304 并且不会返回资源 也不会返回 Last-Modify
缺点
- 在短时间内资源法伤改变 Last-Modify 不会发生改变
- 周期性变化 如果某资源在一定周期内修改成原来的样子 我们认为是能使用缓存的 但事实并非如此
-
ETag/If-None-Match
返回的是一个验证码 ETag 保证每个资源都是唯一 资源的变化都会导致 ETag 的变化服务器根据浏览器上的 If-None-Match 来判断是否命中缓存
在返回304时 由于 ETag 是重新生成过的 也要携带响应回去 即使值和之前没有变化
-
-
资源的存储
-
三级缓存原理
- 优先内存中查找 有则直接返回
- 若内存中没有 再向磁盘中查找 有则返回
- 都没有 进行网络请求
- 将请求到的资源进行内存和磁盘的缓存
-
存放位置
- 内存一般缓存脚本性资源（如js 图片 字体等等需要反复使用） 特点：在进程退出时清除
- 磁盘一般缓存非脚本性资源（如css等等不要频繁读取）
-
本地存储
LocalStoragesetItem getItem removeItem clearSessionStoragesetItem getItem removeItem clearCookiesducument.cookie = 'key=' + value
function getCookie(name) { //获取指定名称的cookie值
// (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
var arr = document.cookie.match(new RegExp(
"(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
console.log(arr);
return unescape(arr[2]);
}
return null;
}
indexDBWeb SQL
