一. React性能优化
1. 减轻不必要的state
只存储跟组件渲染有关的数据(如 count/列表数据/loading等)
不用做渲染的数据不要放在state中,如 定时器id,放在this中
2. shouldComponentUpdate 避免不必要的渲染(类组件)
通过return false告诉组件不需要重新渲染,可通过传参nextProps, nextState来判断是否需要更新
`nextState.num === this.state.num`、`nextProps.num === this.props.num`
3. 纯组件 PureComponent(类组件)
1. PureComponent内部自动实现了shouldComponentUpdate,不需要手动比较,通过分别对比前后两次props和state的值,来决定是否重新渲染
2. PureComponent是浅层对比,只对比对象的引用地址是否相同,不能直接修改对象中的值,应创建新对象;数组用扩展运算符、concat、slice返回新数组的方法,不要使用push等直接修改数组的方法
`class App extends React.PureComponent`
4. useEffect\useCallback\useMemo\React.memo(针对函数组件)
1. useEffect监听依赖项发生变化,执行回调函数
2. useCallback缓存的是一个函数,滥用会造成性能问题,因为会监听依赖项
3. useMemo缓存的是一个值
4. React.memo用于函数组件,类似于类组件的PureComponent
二. Vue代码的一些优化
1. v-if和v-for
1. v-for优先于v-if被解析
2. 如果同时出现,每次都会先执行渲染再判断条件,无论如何循环都不可避免,浪费了性能
3. 要避免出现这种情况,则在外层嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环
2. Object.freeze
不再监听不需要双向绑定的数据
三. 其他优化的地方
1. 长列表性能优化
展示大型列表和表格数据(如:城市列表、通讯录、微博等),会导致页面卡顿,滚动不流畅
产生性能问题的原因:大量DOM节点的重绘和重排
影响移动设备耗电加快、影响移动设备电池寿命
优化方案:1. 懒渲染 2. 可视区域渲染
懒渲染
常见的长列表优化方案,常见于移动端
原理:每次只渲染一部分数据(如10条),等渲染的数据即将滚动完时,再渲染后面部分
优点:每次只渲染一部分数据,速度快
缺点:数据量大时,页面中依然存在大量DOM,占用内存过多、降低浏览器渲染性能,导致页面卡顿
使用场景:数据量不大的情况
可视区域渲染(react-virtualized组件)
原理:只渲染页面可视区域的列表项,在滚动列表时动态恒心列表项(会额外加载一部分数据,考虑滚动快页面白屏的问题)
使用场景:一次性展示大量数据的情况(如:大表格、微博、聊天应用等)