✅ 性能优化：
- 首屏加载优化---打开速度快
- 缓存优化---再次打开速度快
- 渲染优化---操作怎么才顺滑
- 上任务拆分优化---动画保证流畅
之前做过哪些性能优化？
首屏优化指标细化
- FP(首次绘制)
- FCP(首次内容绘制)FP到FCP中间其实主要是SPA应用js执行，太慢就会白屏时间太长
- FMP（首次有效绘制）所期望的主要内容呈现的时间（MutationObserver）
- LCP（最大内容渲染）加载最大内容快呈现的时间
- INP（用户交互到整个页面的响应时间）
- TTI可交互时间，ssr
- TBT（阻塞时间从FCP到TTI）总阻塞时间
- CLS（布局偏移）布局偏移的情况，重排
- TTFB（首字节到达时间）请求发出之后到接收数据中间的时间
体积瘦身
- 优化图片，webp，图片压缩，图片尺寸（在合适的容器内用合适的尺寸图片 1倍2倍3倍）
- 字体瘦身，设计型产品，字体子集化，用哪些字体，就最后只剩成对应字体文件，Fontmin
- 懒加载资源，图片懒加载、js异步加载
- css、js文件压缩，打包构建阶段完成terser
- 代码压缩
- 文件合并
- 文件拆分
- tree-shaking
- 动态加载
- Gzip、Brotli
- SSR、SSG
动画卡顿
单线程，阻塞
- 减少渲染主线程阻塞
- 优化js执行，减少肠任务（复杂的计算【webwork、将任务切分（react scheduler）】）
- GPU
- css 属性（transform、opcity）
- 避免会引起重排的属性（定位 left、top）
- requestAnimationFrame
- 节流防抖
应用层状态优化
- 减少全局状态的依赖
- 将状态尽可能局部化，避免使用全局状态（redux或者Context）管理所有数据
- 对于仅用于某些组件的状态，可以使用组件的useState或者useReducer 2.优化Context的性能
- Context的更新会重新渲染所有订阅的组件
- 拆分Context，将不同的逻辑存储在多个Context中，降低重新渲染范围
- 使用高效的状态管理库
- 使用轻量、高效的状态管理工具，如Zustand、Jotai或者Rcoil，他们都具备更细粒度的状态更新机制
- 避免不必要的状态更新
应用的渲染优化
事件优化
节流防抖 事件绑定 react避免在自组件上过多传递回调函数 避免不必要的dom操作 异步加载和懒加载 请求合并
你们的前端项目性能有重点关注过么？是如何评估，有做具体的性能指标体系和评估吗？
（主导、推进）分析性能问题，给出性能问题对应的解决方案，实施，建立完整的指标体系持续监控，持续优化 我门的低代码平台落地页，我们的落地页搭建出来之后，首屏加载非常慢（FMP 5s），很多冗余的代码【搭建端很多】 性能监控平台
性能指标体系建立
常用的指标计算 performance、performanceObeserver API和webvital来计算。 DNS查询时间 资源加载时间 长任务时间，主线程占用时常超过50ms
采集指标采集
常规 performance、performanceObeserver API和webvital来计算。 自定义指标，FMP通过MutationObserver来定义计算 额外的指标，首字节、服务端上报
性能评估
监控指标和数据拿到了，计算统计评估，得到性能报告，具体分析性能，持续解决
怎么落实应用优化这部分工作，团队代码质量，管理怎么落实
性能监控的全链路设计
指标体系设计、计算、评估等
原则：
- 清晰且量化
- 与业务目标挂钩
- 覆盖加载、交互、稳定性
- 埋点，为了追踪用户浏览痕迹，判断
