跳到主要内容

性能优化

分类	Hooks	Classes
性能分析	`<Profiler>` v16.9	-
懒加载	-	React.lazy() v16.6 import() ES2020
记忆和缓存	-	React.PureComponent v15.3
`\-记忆渲染结果`	useMemo() v16.8	React.memo() v16.6
`\-缓存函数`	useCallback() v16.8	-
`\-`	-	`key` v0.13
延迟更新	useTransition() v18.0	React.startTransition() v18.0
`\-`	useDeferredValue() v18.0	-
Effect 事件分离	useEffectEvent()	-
React 编译器	React Compiler	-

大纲

性能优化
- 分析
  - 网络性能
  - 渲染性能
  - 构建工具性能
    - 网络
    - 渲染
- 策略设计
  - 逻辑优化
  - 资源优化
    - 大小/质量
  - 资源加载
    - 预加载
    - 懒加载
    - 浏览器缓存
  - 网络分发
    - Gzip 传输
    - CDN 分发
- 优化
  - React 源码优化
    - 逻辑优化
    - 资源优化
    - 资源加载
    - 网络分发
  - Webpack 打包优化
    - 逻辑优化
    - 资源优化
    - 资源加载
    - 网络分发
- 监控
  - 统计分析

性能分析

浏览器：Profiler
React：<Profiler>
Webpack：webpack-bundle-analyzer

参考

策略设计

逻辑优化
资源优化
- 大小/质量
资源加载
- 预加载
- 懒加载
- 浏览器缓存
网络分发
- Gzip 传输
- CDN 分发

优化

React 源码优化
- 逻辑优化
  - 记忆和缓存: 记忆计算结果和缓存函数定义
    - React.PureComponent
      - shouldComponentUpdate()
    - useMemo()
      - React.memo()
    - useCallback()
    - key
  - 延迟更新
    - useTransition()
      - React.startTransition()
    - useDeferredValue()
  - Effect 事件分离
    - useEffectEvent()
  - React 编译器自动优化
    - React Compiler
  - 其他
    - 适时销毁自定义事件、定时任务、业务对象
    - “虚拟滚动”技术
      - 这项技术会在有限的时间内仅渲染有限的内容，并奇迹般地降低重新渲染组件消耗的时间，以及创建 DOM 节点的数量
    - 时间分片，上传/下载
    - 多线程技术：web worker
    - 使用业务支持的较新的 API
    - 使用 GPU 加速
    - 优化算法复杂度
- 资源优化
- 资源加载
  - 懒加载
    - React.lazy()
    - import()
- 网络分发
Webpack 打包优化
- 逻辑优化
  - 代码拆分 code-splitting
  - trumk 大小限制
- 资源优化
  - 摇树 Tree-Sharking
  - 压缩 Terser
  - 混淆
- 资源加载
  - 预加载 Prefetch
    - DllPlugin 通用模块提取
    - ProvidePlugin 全局提供
  - 懒加载/按需加载
  - 请求合并
    - 雪碧图 Sprite
  - 浏览器缓存
    - 文件指纹 Hashed
- 网络分发

Hooks
Classes

参考

监控

统计分析

参考

大纲
性能分析
策略设计
优化
监控
参考