前端相关性能优化笔记
1.打开速度怎么变快 - 首屏加载优化
2.再次打开速度怎么变快 - 缓存优化了
3.操作怎么才顺滑 - 渲染优化
4.动画怎么保证流畅 - 长任务拆分
2.1 首屏加载指标细化:
1.FP(First Paint 首次绘制)
2.FCP(First contentful Paint 首次内容绘制)，FP 到 FCP 中间其实主要是 SPA 应用JS执行，太慢就会白屏时间太长
3.FMP(Frist Meaningful Paint 首次有效绘制)，主要内容呈现的时间
4.LCP(Largest Contentful Paint 最大内容渲染)，加载最大内容块呈现时间
5.INP(Interaction to Next Paint) 与下一帧绘制的交互
6.TTI 可交互时间，SSR
7.TBT(Total Blocking Time 阻塞时间从 FCP 到 TTI):总阻塞时间
8.CLS(Cumulative Layout Shift 布局偏移):布局偏移情况，重排 reflow
9.TTFB(Time to First Byte):首字节到达时间，请求发出后到接收到数据中间的时间
2.2 方案：
1.优化图片，Webp，图片压缩，图片尺寸(在合适的容器内用合适的尺寸图片 1倍2倍3倍图)；
2.字体瘦身，设计型产品，字体子集化(用了哪些字，就最后只生成对应字的字体文件)，Fontmin；
3.懒加载资源，图片懒加载、JS 异步加载；
4.css、JavaScript 文件压缩，打包构建阶段完成(terser)
- 代码压缩
- 文件合并
- 文件拆分
- Tree shaking
- 动态加载
5. Gzip、Brotli
6.SSR、SSG
3.1 动画卡顿：
为什么会卡顿？单线程 阻塞
3.2 方案：
1.减少主线程阻塞
优化 JavaScript 执行，较少长任务(复杂的计算【web worker、将任务切分(react ScheduLer)】)
2.GPU
- css 属性(transform、opacity)
- 避免会引起重排的属性(定位 left、top)
3.requestAnimationFrame；
4.节流防抖
4.1 应用层状态优化:
1.减少全局状态的依赖
- 将状态尽可能局部化，避免使用全局状态(Redux或Context)管理所有数据。
- 如示例:对于仅用于某些组件的状态，可以使用组件的 useState 或useReducer。
2.优化 Context 的性能
- Context 的更新会重新渲染所有订阅的组件
- 解决方案:拆分:Context，将不同的逻辑存储在多个 Context 中，降低重新渲染范围。
3.使用高效的状态管理库
- 使用轻量、高性能的状态管理工具，如Zustand、Jotai 或 Recoil，它们具备更细粒度的状态更新机制。
4.避免不必要的状态更新