对于正常项目优化，一般涉及：开发过程中、上线之后的首屏、运行过程的状态。
首屏优化--指标包括：FP、FCP、FMP
-
要有良好的体验是尽可能把 FCP 提前，需要做一个工程化处理，去优化资源的加载方式以及分包策略，资源的减少是最有效的加快首屏打开的方式。
-
对于 CSR 的应用，FCP 的过程一般是首先加载 JS 和 CSS 资源，JS 在本地执行完成，然后加载数据回来，做内容初始化渲染，这中间就有几次网络反复请求的过程。 所以 CSR 可以考虑使用骨架屏以及预渲染（部分结构预渲染）、suspence 与 lazy 做懒加载动态组件的方式。
-
对于 SSR 的应用对于首屏优化有一定的优势，但这种瓶颈一般在 Node 服务器端的处理，建议使用 stream 流的方式来处理，对于体验与 Node 端的内存管理等都有优势。
-
不管是 CSR 或 SSR，都建议配合使用 Service worker实现离线缓存，来控制资源的调配以及骨架屏秒开的体验。
React 上线后
-
React 上线后，首先保障可用性，可以通过 React.Profiler 组件来分析其它组件的渲染次数以及它们执行的任务。但是 Profiler 记录的是 commit 阶段的数据，所以对于 React 的调和阶段就需要结合 Performance API 一起分析。
-
React 当父组件的 props 改变后，所有与 props 不相关的子组件在没有添加条件控制的情况下，也会触发 Render 渲染，这是没有必要的。可以结合 React 的PureComponent 以及 React.mome 等做浅比较处理、或者结合使用 ShouldComponentUpdate 做深比较处理。
运行过程的状态
-
所有运行状态优化都是减少不必要的 Render。React.mome 与 React.callback 也是可以做很多优化的地方。
-
在很多应用中都会涉及到使用 Redux 和 React Context，这两个都可能会造成许多不必要的重新渲染（re-render），在使用时需要谨慎处理一些数据。
-
最后是保障整个应用的可用性，为组件创建错误边界，可以使用 ComponentDidcatch 来处理。
其他可优化的点
- 保证数据的不可变性
- 使用唯一的键值对迭代
- 使用 Web worker做密集型的任务处理
- 不在 Reder 中处理数据
- 不必要的标签，使用 React.Fragment
补充：
-
React.Fragment 是 React 中用来渲染不创建额外 DOM 元素的组件的一种方式。它可以用来替代多余的 div 或 span 元素，以避免不必要的标签嵌套。
-
FP（First Paint）表示页面开始渲染的时间点，是用户能看到页面内容的第一个像素的时间点；
-
FCP（First Contentful Paint）表示页面内容开始渲染的时间点，即页面上的第一个内容元素（如文字、图片等）开始绘制的时间；
-
FMP（First Meaningful Paint）则是一个更主观的指标，表示页面主要内容开始呈现的时间点，但具体定义可能因不同浏览器或工具而异。这些指标共同用于评估首屏性能，即用户看到页面初步内容所需的时间。
-
前端性能监控之Chrome调试(一) article.juejin.cn/post/724883…
-
前端性能监控实践（二） article.juejin.cn/post/684490…
-
SSR（服务器端渲染）、SSG（静态站点生成）、CSR（客户端渲染） blog.csdn.net/wujiayu3141…
