Vue.js中如何优化性能?9个小技巧分享

Vue.js中如何优化性能?下面本篇文章给大家分享Vue.js 性能优化的九个小技巧,希望对大家有所帮助!

Vue.js中如何优化性能?9个小技巧分享

(学习视频分享:vuejs教程)

01 Functional components

1.png

1-2.png

**原理:****函数式组件**与普通组件相比,它没有状态(没有响应式数据),没有实例 (没有 this 上下文)。我们可以把函数式组件想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的 HTML。正是因为函数式组件精简了很多例如响应式和钩子函数的处理,因此渲染性能会有一定提高。

适用场景:

  1. 不需要响应式数据及处理逻辑的纯展示组件

  2. 用来标记或提供基本功能的高阶组件

  3. 循环(v-for)中的元素

02 Child component splitting

2.png

2-2.png

**原理:**在优化前的代码中,每次 props 传入的 number 发生变化时都会重新渲染,在渲染的过程中又会重新调用 heavy 函数进行耗性能的运算。而优化后的代码逻辑是将复杂运算封装在子组件内,由于 Vue 的更新是组件粒度的,当传入的 number 发生变化时,父组件会重新渲染,而子组件由于并不依赖 number 因此并不会重新渲染。执行计算的次数少了,性能自然也提升了。

**另:**这里其实也可以用 computed 计算属性来优化(外部依赖没有变化时不会重新计算,而且省去了额外渲染子组件的开销)

03 Local variables

3.png

3-2.png

**原理:**对比前后代码可以发现区别在于:优化前的代码在进行计算时每次都直接引用 this.base,而优化后的代码将 this.base 使用局部变量 base 进行了缓存,在之后的计算中都调用局部变量进行计算。为什么会造成如此明显的性能差异呢?原因在于每次访问 this.base 时,由于 this.base 是计算属性,因此会执行一段逻辑代码查看已有的依赖项是否发生变化,如果发生变化则重新计算,没有则返回上一次计算值。这类计算逻辑的性能消耗在仅仅多调用几次时可能还不明显,但执行多了(类似示例每帧更新 300 个组件,每个组件在一次更新内又调用了多次 this.base)则会有比较大的性能差异。

04 Reuse DOM with v-show

4.png

4-2.png

原理:

  • 实现方式:v-if 是动态的向 DOM 树内添加或者删除 DOM 元素,v-show 是通过设置 DOM 元素的 display 样式属性控制显隐。

  • 编译过程:v-if 切换有一个局部编译卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件,v-show 只是简单的基于 CSS 切换。

  • 编译条件:v-if 是惰性的,如果初始条件为假,则什么也不做,只有在条件第一次变为真时才开始局部编译, v-show 是在任何条件下都被编译,然后被缓存,而且 DOM 元素保留。

  • 性能消耗:v-if 有更高的切换消耗,v-show 有更高的初始渲染消耗。

  • 使用场景:v-if 适合条件不太可能改变的情况,v-show 适合条件频繁切换的情况。

05 Keep-alive

5.png

5-2.png

5-3.png

**原理:**在非优化场景下,我们每次点击按钮切换路由视图,都会重新渲染一次组件,渲染组件就会经过组件初始化,render、patch 等过程,如果组件比较复杂,或者嵌套较深,那么整个渲染耗时就会很长。而在使用 KeepAlive 后,被 KeepAlive 包裹的组件在经过第一次渲染后的 vnode 以及 DOM 都会被缓存起来,然后再下一次再次渲染该组件的时候,直接从缓存中拿到对应的 vnode 和 DOM,然后渲染,并不需要再走一次组件初始化,render 和 patch 等一系列流程,减少了 script 的执行时间,性能更好。

但是使用 KeepAlive 组件并非没有成本,因为它会占用更多的内存去做缓存,这是一种典型的空间换时间优化思想的应用。

06 Deferred features

6.png

其中 deferMixin 如下:

6-2.png

6-3.png

6-4.png

**原理:**Defer 的主要思想就是把一个组件的一次渲染拆成多次,它内部维护了 displayPriority 变量,然后在通过 requestAnimationFrame 在每一帧渲染的时候自增,最多加到 count。然后使用 Defer mixin 的组件内部就可以通过 v-if="defer(xxx)" 的方式来控制在 displayPriority 增加到 xxx 的时候渲染某些区块了。

当你有渲染耗时的组件,使用 Deferred 做渐进式渲染是不错的注意,它能避免一次 render 由于 JS 执行时间过长导致渲染卡住的现象。

07 Time slicing

7.png

7-2.png

7-3.png

**原理:**使用时间分片可以避免一次性提交的数据过多,内部 Js 执行时间过长,阻塞 UI 进程导致页面卡死。

**另:**在执行耗时任务处理时,我们通常会加一个 loading 效果,但通过优化前后对比可以发现:优化前 JS 一直长时间运行,阻塞 UI 进程,因此并不会展示 loading 动画;优化后由于将耗时任务拆成多个时间片提交,单次 JS 运行时间变短了,loading 动画也有机会渲染了。

08 Non-reactive data

8.png

8-2.png

8-3.png

**原理:**内部提交数据时会默认将新提交的数据定义成响应式,如果对象的子属性是对象,还会递归让子属性也变成响应式。因此当提交数据过多时,整个过程十分耗时。而优化后通过将 data 中的属性标志 configurable 手动变成 false,这样内部通过 Object.keys(obj) 获取对象属性数组会忽略 data,也就不会为 data 这个属性 defineReactive,由于 data 指向的是一个对象,这样也就会减少递归响应式的逻辑,相当于减少了这部分的性能损耗。数据量越大,这种优化的效果就会更明显。

设置 configurable 与直接使用 Object.freeze 的区别是:

**configurable: false**的用途是防止更改和删除属性标志,但是允许更改对象的值;

**Object.freeze(obj)**禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false

// configurable: false

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  configurable: false
});

user.name = "Pete"; // 正常工作
delete user.name; // Error

// Object.freeze(obj)

let user = {
  name: "John"
};

Object.freeze(user);

user.name = "Pete";
console.log(user.name); // "John"复制代码

09 Virtual scrolling

9.png

**原理:**虚拟滚动的实现方式是仅渲染视图范围内的 DOM,渲染内容少时性能自然会好很多。虚拟滚动组件也是 Guillaume Chau 写的,感兴趣的同学可以去研究它的源码实现,基本原理就是监听滚动事件,动态更新需要显示的 DOM 元素,计算出它们在视图中的位移。虚拟滚动组件也并非没有成本,因为它需要在滚动的过程中实时去计算,所以会有一定的 script 执行的成本。因此如果列表的数据量不是很大的情况,我们使用普通的滚动就足够了

本文转载自:https://juejin.cn/post/7084809333740929061

(学习视频分享:web前端开发)

以上就是Vue.js中如何优化性能?9个小技巧分享的详细内容,更多请关注www.sxiaw.com其它相关文章!