优化项目性能——缓存
一个页面的速度由什么决定？
- 资源传输时间（TCP链接时间+响应时间）
- Dom渲染耗时 （所以减少DOM嵌套，能用一个就不要用两个）
TCP链接时间 = connectStart - connectEnd
响应耗时 = responseStart - requestEnd
Dom耗时：需要放在window.onload中进行检测；domComplete - domLoading
优化速度的几个方面
- 服务器优化 （TCP链接耗时大，就是后台的问题了）
- 减少传输内容 - 体积和切片
- 缓存
减少传输内容——体积
- 代码压缩
- tree-shaking
- 压缩图片
减少传输内容——切片
- 懒加载
- webpack代码分割
–vue单页面，所有的东西都在一个js，把懒加载部分切割出来
（单页面-业务代码app.js，第三方代码chunk-vendors.js，webpack运行代码-异步模块 ）
–vue多页面，重复代码加载 A(e,f) B(f,g) ; 如果不把f分割出来，则f部分会重复加载;; A(e) B(g) f.js ；；浏览器自动缓存机制
（多页面-页面js，页面共用js，第三方代码，webpack运行代码）
缓存的几种方式
- cookies (缓存量小上限4kb，不安全)
- 全局状态缓存（缓存到内存中，读取最快；；不持久性，一刷新就没了；大了会占用内存）
- 本地缓存
- localstorage：长期本地缓存，不手动删除，会一直在
- sessionstorage：会话级，页面关了，就没了
缓存需要考虑的问题
- 缓存的量引起的内存，存储压力
- 缓存的更新问题
缓存架构
缓存的量引起的内存，存储压力
第一次加载后，后续无需请求
访问频繁的放入localstorage，不频繁的放入状态缓存中
减少if-else嵌套，使用设计模式：单一模式，策略模式，状态模式
- 梳理成3种状态（在localstorage缓存中，在window.caches缓存中，不在缓存中）
- 再在状态处理工厂，处理相应操作
- 返回promise对象
缓存的更新问题
- 如何在数据更新后，保持最新数据
api接口没有很好的解决方案（由业务决定哪些接口适合缓存，哪些不适合）
- 缓存的接口变动越少越好，时限
- 成本比较大-websocket
- 小成本请求，进入项目，先发一个小请求，只给你回传改变的接口
ajax和fetch优雅请求
hash如何影响缓存的
基于静态数据的缓存，对于api请求并不好使
浏览器自动缓存机制 hash后缀
但是可以设置请求头来控制缓存的
hashh=>html=>加载的名字也变了