目录
1,使用key
对于通过循环生成的列表,应给每个列表项一个稳定且唯一的key,这有利于在列表变动时,尽量少的删除、新增、改动元素
2,使用冻结对象
冻结的对象不会被响应
Object.freeze()
3,使用函数式组件
函数式组件无状态 (没有响应式数据),也没有实例 。 参见 函数式组件 。
4,使用计算属性
如果模板中某个数据会使用多次,并且该数据是通过计算得到的,使用计算属性以缓存它们。
5,非实时绑定的表单项
当使用 v-model 绑定一个表单项时,当用户改变表单项的状态时,也会随之改变数据,从而导致 vue 发生重渲染(rerender),这会带来一些性能的开销。
我们可以通过使用 lazy 或不使用 v-model 的方式解决该问题,但要注意,这样可能会导致在某一个时间段内数据和表单项的值是不一致的。
6,保持对象引用稳定
在绝大部分情况下, vue 触发 rerender 的时机是其依赖的数据发生变化
若数据没有发生变化,哪怕给数据重新赋值了,vue 也是不会做出任何处理的
下面是 vue 判断数据没有变化的源码:
function hasChanged(x, y) {
if(x === y) {
return x === 0 && 1 / x !== 1 / y
}else {
return x === x || y === y
}
}
因此,如果需要,只要能保证组件的依赖数据不发生变化,组件就不会重新渲染。
对于原始数据类型,保持其值不变即可
对于对象类型,保持其引用不变即可
从另一方面来说,由于可以通过保持属性引用稳定来避免子组件的重渲染,那么我们应该细分组件来尽量避免多余的渲染
7,使用v-show替代v-if
对于频繁切换显示状态的元素,使用v-show可以保证虚拟dom树的稳定,避免频繁的新增和删除元素,特别是对于那些内部包含大量dom元素的节点,这一点极其重要
关键字:频繁切换显示状态、内部包含大量dom元素
8,使用延迟装载(defer)
JS传输完成后,浏览器开始执行JS构造页面。
但可能一开始要渲染的组件太多,不仅JS执行的时间很长,而且执行完后浏览器要染的元素过多,从而导致页面白屏
一个可行的办法就是延迟装载组件,让组件按照指定的先后顺序依次一个一个渲染出来
延迟装载是一个思路,本质上就是利用 requestAnimationFrame 事件分批渲染内容,它的具体实现多种多样
9,使用keep-alive
SPA 页面采用 keep-alive 缓存组件
10,长列表优化
- 不做响应式
使用 Object.freeze()
冻结一个对象,MDN的描述 冻结对象可以防止扩展,并使现有的属性不可写入和不可配置。被冻结的对象不能再被更改:不能添加新的属性,不能移除现有的属性,不能更改它们的可枚举性、可配置性、可写性或值,对象的原型也不能被重新指定。
- 虚拟滚动
长列表滚动到可视区域动态加载。
参考 vue-virtual-scroller、vue-virtual-scroll-list
11,打包体积优化
- 压缩代码
- Tree Shaking/Scope Hoisting
- 使用 cdn 加载第三方模块
- 多线程打包 happypack
- splitChunks 抽离公共文件
- sourceMap 优化
12, vue.js 官网列举的性能优化
Vue 3 的文档 性能优化