分类
Javascript

优化Vue页面性能

前面介绍过一篇Web App页面性能优化的文章,这是对普通页面的性能优化。针对Vue页面,还有一些特殊技巧。

使用v-show

使用v-show隐藏显示DOM,其大小和位置都不会改变,不会引起回流(reflow)与重绘(repaint)。v-if 适用于在运行时很少改变条件,不需要频繁切换条件的场景。v-show 适用于需要非常频繁切换条件的场景.

使用computed

computed 是计算属性,依赖其他属性计算值,并且 computed 的值有缓存,只有当计算值变化才会返回内容,它可以设置 getter 和 setter。watch 监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作。

v-for遍历加key

如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为Vue中vnode的唯一标记,通过这个key,我们的diff操作可以更准确、更快速。

销毁清理

在组件销毁时清理它与其它实例的连接,解绑它的全部指令及事件监听器,有效防止内部泄漏。

在动态组件上使用 keep-alive

KeepAlive包裹的组件实例能够被在它们第一次被渲染创建的时候缓存下来。当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题。

使用异步组件按需加载

动态路由、异步组件和 webpack 的 code-splitting 功能一起配合使用,将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。渐进式渲染能避免一次渲染由于JS执行时间过长导致渲染卡住的现象。

使用防抖、节流

使用lodash debounce (也有可能是 throttle) 来直接控制高耗任务,防抖、节流在一定程度上可以减小再次渲染的次数,从而避免反复重渲染导致的性能问题。

使用非响应数据

不需要响应式的数据不要放到 data 中(可以用 Object.freeze() 冻结数据)。把新提交的数据中的对象属性data手动变成了只读,这样也就会减少递归响应式的逻辑,相当于减少了这部分的性能损耗。数据量越大,这种优化的效果就会更明显。

子组件拆分

由于Vue的更新是组件粒度的,虽然每一帧都通过数据修改导致了父组件的重新渲染,但是子组件却不会重新渲染,因为它的内部也没有任何响应式数据的变化。因此组件不会在每次渲染都执行耗时任务,自然执行的 JavaScript 时间就变少了。

使用函数式组件

由于函数式组件不需要实例化,无状态,没有生命周期,props可以不用显示声明,所以没有在props里面声明的属性都会被自动隐式解析为prop,所以渲染性能要好于普通组件。

使用虚拟列表/虚拟表格/虚拟滚动

使用大数据列表时,因为使用虚拟列表/虚拟表格/虚拟滚动的实现方式,是只渲染视口内的DOM,这样总共渲染的DOM数量就很少了,自然性能就会好很多。

大家平常工作都用到过哪些优化Vue页面性能的技巧呢?

😎Happy Coding!