前端性能优化-通用的缓存SDK（介绍常用缓存方式）

• css样式表
• js文件

简介技术选型

• 发现问题
• 业内有什么通用方案
• 方案是否解决了我们的问题
• 需要我们自己写方案么
• 我们的方案需要别人的轮子妈
• 我们要造轮子么

sessionStorage（前端缓存技术）

• sessionstorage
• userData(为IE服务，有大小限制，出现很早，和受限制不受限制有关)
• cookie(每一次发送请求都会发给浏览器，cookie都会被带过去。)
• openDateBase(相当于一个完整的数据库，创建数据库，对表进行增删改查，条件查询，索引)
• localstorage

sessionstorage(临时存储神器)

• 优点：关闭页面标签自动回收，不可以跨页面交互，注意做取值判断的时候，getitem和直接取对象的方式返回值是不一样的，一定要判断null和undefined，否则的话会有漏洞

Paste_Image.png

• 在同一个浏览器里，不同的两个标签打开同一个页面，sessionstrorage是不能共享的

Paste_Image.png

Paste_Image.png

• 缺点 因为是临时，所以不能永久存储持久化的东西

userdata

存储限制太小，单个文件128kb，一个域名下可以保存1024kb，文件个数没有限制。在受限站点里分别是64kb和640kb

cookie兼容性最好的本地存储

• 优点：兼容性最好，几乎所有浏览器都支持
• 缺点：大小有限制，而且每次发送请求，请求头里会带着cookie一起发过去，现在基本大多数登录的合法验证都是用cookie验证的。

openDatabase没有他做不了的

优点：就是一个完整的数据库
缺点：可能对于前端同学来说，成本太高

localstorage 主角

• 优点：兼容性中等，操作简单，就是key-value形式，几乎现代的浏览器斗支持
• 缺点: 存在大小限制，IE9/IE10不支持。

提取资源

提取用户第一时间看到的，提取页面第一时间执行的

1. 初始化数据的js,或者其他文件以来的库
   2.用户进入页面需要看到页面的结构，不希望有白屏。