前端性能优化

整体概括：

做过哪些性能优化相关的工作？

• 首屏加载优化
  先说明应用的问题，怎么衡量加载情况好了多少？

页面加载的具体指标的了解 如何根据指标获得加载性能

首屏加载指标细化：

1. FP(首次绘制，First Paint)

2. FCP（首次内容绘制，First contentful Paint）：页面从开始加载到任何内容呈现在屏幕上的时间，FP到FCP中间主要是SPA应用JS执行，太慢就会出现白屏时间太长

3. FMP（首次有效绘制，First Meaningful Paint): 主要内容呈现的时间（MutationObserver)

4. LCP（Largest Contentful Paint，最大内容绘制): 加载最大内容快的呈现时间

5. IMP（Interaction to next paint）

6. TTI（可交互时间）

7. TBT（Total blocing time，阻塞时间从FCP到TTI)：总阻塞时间

8. CLS（Cumulative Layout Shift, 布局偏移）：布局偏移情况，重排reflow

9. TTFB（Time to First Byte): 首字节到达时间，请求发出后到接收到数据中间的时间

减小首屏资源体积

1. 优化图片 Webp、图片压缩、图片尺寸 1x 2x 3x
2. 字体瘦身 Fontmin
3. 懒加载资源：图片懒加载、js异步加载、
4. CSS、JS文件压缩 打包构建阶段完成（terser、esbuild、treeshaking

• 代码压缩
• 文件拆分
• Tree shaking
• 动态加载

5. Gzip\Brotli
6. SSR、SSG

动画卡顿

为什么会卡顿 ？？？ 单线程 阻塞主线程上其他任务执行（动画、交互事件

在什么地方 哪一部分代码 造成长任务 执行时间较长 导致线程被阻塞 出现页面卡顿

方案

1. 减少主线程阻塞

• 优化JS执行，减少长任务（eg: 复杂的计算（eg: webworker、时间分片处理）

2. GPU

• CSS树形(transform、opacity）
• 避免会引起重排的树形 eg: left、top而是用transform或transition代替

3. requestAnimationFrame
4. 节流、防抖

应用层

React状态管理优化

1. 减少全局状态的依赖

• 将状态尽可能局部化，避免使用全局状态（eg: Redux或Context）管理所有数据
• eg: 仅用于某些组件的状态，可使用组件的useState或useReducer

2. 优化Context的性能

• Context的更新会重新渲染所有订阅的组件
• 解决方案：拆分Context，将不同的逻辑存储在多个Context中，降低重新渲染范围

3. 使用高效的状态管理库

• 使用轻量、高性能状态管理工具，eg: Zustand

4. 避免不必要的状态更新

• 使用不可变数据结构（eg: immer）管理状态，减少对数据的直接修改
  

React视图更新优化

1. 使用React.memo防止不必要的重新渲染

• 对函数组件进行包括，只有props变化时才会重新渲染