笔记：浏览器——缓存与储存

我才是真的李成贤

已于 2022-08-11 20:20:18 修改

阅读量342

点赞数

文章标签：缓存前端

于 2022-07-29 16:39:57 首次发布

本文链接：https://blog.csdn.net/weixin_52009092/article/details/126057590

版权

笔记：浏览器——缓存与储存

HTTP缓存
- 强缓存
- 协商缓存
Service Worker
CDN缓存
Web Storage
前端优化

HTTP缓存

①Ctrl+F5强制刷新页面，缓存机制均无效，不允许使用任何缓存。
②F5刷新页面，跳过强缓存机制，协商缓正常使用。

强缓存

强缓存校验
①浏览器发起GET请求前，检查本地是否有缓存，若无缓存直接发起GET请求，得到响应后，判断是否需要缓存。
②如果浏览器本地有缓存，则检查强缓存资源是否过期。没有过期则直接跳过GET请求，使用缓存资源。
③如果强缓存资源过期，则转为协商缓存校验。
强缓存分为disk cache和memory cache
在浏览器开发者工具Network中可以看到
强缓存的控制
①Expires是HTTP1.0中的字段，优先级最低。字段属性是一个时间戳，超过这个时间戳缓存过期。
②Cache-Control是HTTP1.1的字段。字段属性：
no-store：禁止使用缓存，每次请求都去服务端拿最新的资源
no-cache：不使用强缓存，直接进入协商缓存
private：私有缓存，中间代理服务端不可缓存资源
public：公共缓存，中间代理服务端可以缓存资源
max-age：缓存的最长有效时间，单位是秒
must-revalidate：缓存一旦过期，则必须重新向服务端验证
③Pragma是HTTP1.0的字段。只有一个no-cache属性与Cache-Control相同，但优先级大于Cache-Control。

协商缓存

协商缓存校验
①强缓存校验过期后转为协商缓存校验，则会判断该资源上一响应头中是否有ETag，若存在则携带If-None-Match请求头发起请求。如果返回304则更新缓存头部信息，使用缓存资源。若返回200则重新缓存资源。
②若不存在ETag，则判断该资源上一响应头中是否有Last-Modified，若存在则携带If- Modified-Since请求头发起请求。如果返回304则更新缓存头部信息，使用缓存资源。若返回200则重新缓存资源。
③若都不存在则直接发起GET请求，得到响应后，判断是否需要缓存。
协商缓存的控制
①ETag / If-None-Match：优先级较高，用哈希值表示资源是否变化。
②Last-Modified / If- Modified-Since：比较修改时间和请求时间表示资源是否变化。存在1秒问题，当文件在1秒内修改，且再次收到请求时会错误返回304。

Service Worker

CDN缓存

①Content Delivery Network内容分发网络，将网站的内容发布到最接近用户的网络边缘的节点，作为一层缓存，使用户可以就近取得所需的内容，提高用户访问网站的响应速度。
缓存控制
①CDN节点缓存静态资源遵循HTTP缓存。动态资源不进行缓存，请求回源并返回给客户端。
②Vary是HTTP1.1的字段。其属性是请求头中的字段，记录了代理服务器向客户端返回资源时，参考了哪些头字段。代理服务器拿到源服务器的响应报文，根据Vary中的字段列表，缓存不同版本的资源。当有客户端请求资源时，会分析Vary中的字段，返回正确版本的资源。

Web Storage

Cookie

①浏览器Cookie的储存大小约为4K，且有个数限制，只能储存字符串类型数据。每次浏览器发送请求时会自动携带Cookie。
②Cookie有过期时间，删除一个Cookie只需将过期时间设置为-1即可。
③通过JS设置Cookie的domain都会默认以.开头的。
④删除Cookie需要domain属性与path属性一致才可删除。当domain属性为document.domain时，设置domain为空字符串即可删除。

// 获取Cookie
function getCookie(name){
    const cookies = {};
    const arr = document.cookie.split('; ');
    arr.forEach(item => {
        const [key, value] = item.split('=');
        cookies[key] = value;
    })
    return cookies[name];
}
// 设置Cookie
function setCookie(name, value, expires, domain='', path='/') {
    const d = new Date();
    d.setTime(d.getTime() + expires);
    const exp = d.toUTCString();
    document.cookie = `${name}=${value};expires=${exp};path=${path};domain=${domain};`;
}
// 删除Cookie
function removeCookie(name) {  
    setCookie(name, "", -1);  
}

LocalStorage

①浏览器localStorage在浏览器关闭后仍然永久储存数据，只能手动清除。
②储存的键值对必须是字符串类型，可用JSON.stringify()方法转换。
③读取键值是字符串类型，可用JSON.parse()方法转换。读取一个不存在的键名时，返回null。

localStorage.setItem('key', JSON.stringify(value));
JSON.parse(localStorage.getItem('key'));
localStorage.removeItem('key');
localStorage.clear();

SessionStorage

①浏览器sessionStorage在浏览器关闭后丢失数据，在会话期间保持数据。
②每个页面的sessionStorage都独立不共享，即使是打开了多个相同页面。

sessionStorage.setItem('key', JSON.stringify(value));
JSON.parse(sessionStorage.getItem('key'));
sessionStorage.removeItem('key');
sessionStorage.clear();

IndexDB

前端优化

模块	内容	模块	内容
HTTP	1. 减少前端HTTP请求。 2. 浏览器缓存相同的JS、CSS、图片。 3. 页面GZIP压缩。 4. 减小Cookie的大小。	HTML	1. 减少<iframe>，<tabel>(容易引起回流)的使用。 2. 减少DOM结构的层级。
CSS	1. CSS引入标签放页面顶部。 2. 使用CSS Sprites（雪碧图）。 3. 尽量使用类名选择器。 4. 动画元素开启定位或浮动，脱离文档流	JavaScript	1. JS脚本放页面底部。 2. 修改样式时，可以先把DOM克隆或隐藏，离线修改，再展示。 3. 节流和防抖 4. 不要一条一条的修改DOM样式，而是修改className或者修改style.cssText
其他	1. 图片懒加载、预加载、图片base64。 2. 组件按需加载。 3. 虚拟滚动列表

图片懒加载

①图片的加载是由src引起的，使用HTML5的自定义属性data-src属性来储存真实图片的路径，将src储存为正在加载图片。在需要加载图片的时候，将data-src中的值赋值给src，这样就实现了图片的按需加载，即懒加载。
②懒加载图片的条件：元素顶部距离文档顶部的高度 < 浏览器滚动的过的距离 + 浏览器视口的高度。