前端相关性能优化笔记

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.避免不必要的状态更新