文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue.js中怎么优化性能

2023-06-30 01:47

关注

这篇文章主要介绍“Vue.js中怎么优化性能”,在日常操作中,相信很多人在Vue.js中怎么优化性能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue.js中怎么优化性能”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

01 Functional components

Vue.js中怎么优化性能

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

适用场景:

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

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

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

02 Child component splitting

Vue.js中怎么优化性能

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

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

03 Local variables

Vue.js中怎么优化性能

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

04 Reuse DOM with v-show

Vue.js中怎么优化性能

原理:

05 Keep-alive

Vue.js中怎么优化性能

Vue.js中怎么优化性能

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

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

06 Deferred features

Vue.js中怎么优化性能

其中 deferMixin 如下:

Vue.js中怎么优化性能

Vue.js中怎么优化性能

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

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

07 Time slicing

Vue.js中怎么优化性能

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

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

08 Non-reactive data

Vue.js中怎么优化性能

Vue.js中怎么优化性能

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

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

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

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

// configurable: falselet 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

Vue.js中怎么优化性能

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

到此,关于“Vue.js中怎么优化性能”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯