以下内容为个人方便记忆使用。
1. 排查工具
-
Chrome浏览器
Performance -
Chrome浏览器 more tools ->
Performance monitor -
Chrome浏览器
React Developer Tools插件勾选
General下的Highlight updates when components render. -
Chrome浏览器
LightHouse
2. 优化工作
-
防抖操作
-
数据拆分
-
组件添加是否需要更新的判断。
React.PureComponent或useMemo() -
组件优化，数据缓存。如：虚拟长列表
-
资源拆分、压缩、缓存
