性能优化总结:减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式。
如何获取指标
- Lighthouse插件
- web-vitals-extension插件
- Chrome DevTools ----(Performance)
指标优化有哪些
核心性能指标
输入URL到页面加载发生了什么
网络层面优化
network
React做性能优化
-
useMemo: 把“创建”函数和依赖项数组作为参数传入
useMemo
,它仅会在某个依赖项改变时才重新计算 memoized 值, 主要用于将变量缓存 -
useCallback:
useMemo
的语法糖,返回一个 memoized 回调函数。主要用于将函数缓存 -
React.memo:类似于
PureComponent
,主要是为了在父组件渲染时防止对没有状态变化的子组件进行不必要的渲染