0 定性能优化的目标
做性能优化之前，需要具体知道是哪些方面有性能问题，一般情况我们会先用 Performance API 来收集性能指标数据，比如：FP/FCP/LCP 、CLS/TTI/TBT等等，然后参考谷歌的 RAIL 模型, 有针对性的优化
(RAIL分别代表: Response:响应 Animation:动画 Idle:空闲 Load:加载)
结合浏览器的工作过程，可以分为5个阶段做性能优化：
1 网络通讯：减少请求次数、减少内容量
-
-
- DNS 预解析 ：dns-prefetch
- 缓存：(强缓存和协商缓存)，数据采用 localStorage 缓存
- CDN：不经常改变的资源可以放在CDN
- TLS 会话复用
- 压缩合并 (js/css/图片/图标)
- 减少 cookie 大小
- 多域名
- 图片：压缩、使用 webp 、使用 svg、去掉图片中的metadata、慎用base64、lazyload
- 使用http2 : Push Cache是一种存在于会话阶段的缓存,当session终止时,缓存也随之释放****
- 删除无用js、css
-
2 服务端：数据读写提速
-
-
- 缓存
- 上云
- 服务器开启gzip(请求gzip资源)
- 数据读写分离、分库分表等
- graphql —— 合并接口
-
3 页面解析：
-
-
- JS 放后面，或标注 defer、async
- css 放前面
- 尽量避免使用 iframe
- Critical CSS
- 精简 dom 层级
-
4 页面渲染：保持较高fps
-
-
- 尽量避免重排
- 使用 flexbox
- 减少 dom 数量 —— 虚拟长列表
- 优化 css 选择器结构
- 尽量避免使用 table
- 尽可能使用 gpu 加速
-
-
-
-
- 过多地开启硬件加速可能会耗费较多的内存，因此什么时候开启硬件加速，给多少元素开启硬件加速，需要用测试结果说话
-
-
5 页面响应：
-
-
- webworker 分离 CPU 操作
- 尽量使用 requestAnimationFrame
- 慎用闭包、全局状态
- 避免死循环，慎用递归
- 保持代码的优良设计，减少冗余代码
- 不要在循环在重复读取页面样式
- 避免使用 getBoundingClientRect 等接口
- 灵活使用防抖节流
-
工程化手段: 防劣化
-
-
- tree-shaking
- code split
- 按需加载
- 微前端
-
结合云客服微应用改造，说说自己真实经历过的性能优化，要提现出更深入的认知
【亮点】熟悉JIT 优化：尽量复用函数、避免动态添加属性、尽量保持变量类型一致、避免数组元素类型转换
