一、性能永远是第一需求,时刻考虑性能问题
- 如何避免应用出现性能问题,如下所示:
- 了解常见的性能问题场景
- 时刻注意代码的潜在性能问题
- 注重可重构的代码
- 了解如何使用工具定位性能问题
二、网络性能优化,自动化按需加载
- 如何在
React
中实现按需加载,如下所示:
- 什么是按需加载
- 使用
webpack
的import API
- 使用
react-loadable
库实现React
异步加载
三、使用 Reselect 避免重复计算
Reselect
,创建自动缓存的数据,处理流程
四、下一代 React,异步渲染
- 异步渲染的两个部分,如下所示:
- 时间分片,
DOM
操作的优先级低于浏览器原生行为,例如键盘和鼠标输入,从而保证操作的流畅 - 渲染挂起,虚拟
DOM
节点可以等待某个异步操作的完成,并指定timeout
,之后才完成真正的渲染
- 对于时间分片,如下所示:
- 虚拟
DOM
的diff
操作可以分片进行 React
新API
,unstable_deferredUpdates
Chrome
新API
,requestldleCallback
- 对于渲染挂起,如下所示:
- 新内置组件,
Timeout
unstabel_deferUpdate
五、使用 Chrome DevTool 进行性能调优
- 借助工具发现性能问题,如下所示:
- 使用
React DevTool
找打多余渲染 - 使用
Chrome DevTool
定位性能瓶颈