当前位置:首页 > 网站源码 > 正文内容

vue组件性能优化(vue组件化优点)

网站源码1年前 (2023-02-26)151

本篇文章给大家谈谈19.html" class="superseo">vue组件性能优化,以及vue组件化优点对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

第 005 期 Vue 运行时性能优化之减少渲染组件的次数

减少组件的渲染次数,能提升 Vue App 的运行时性能。通过写法的优化,可以减少不必要的组件渲染次数。

开发中,我们会碰到用动态组件的情况。如多标签的页面,每个标签的内容是个动态组件:

标签来回切换,同一个组件会被重复渲染。用 keep-alive 包裹动态组件,可以缓存组件的渲染结果,保证同一个组件只被渲染一次。优化写法如下:

v-if 有更高的切换开销。 v-show 有更高的初始渲染开销,其值变化时,内容并不会重新渲染。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

插槽的数据发生改变时,旧的插槽写法,会导致插槽父组件的更新,插槽组件也就更新了。新的插槽写法只会更新插槽组件,少了更新父组件这过程。

旧的插槽写法:

Vue 2.6 加了新的插槽写法: v-slot 。如下:

了解更多插槽新写法的内容,见 Vue 2.6 发布了 。

vue3 在哪些方便做了性能提升?

概要

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。vue2版本阶段已经证明了它的易用性和流行性,说明它已经足够优秀在构建前端应用领域,而vue3的推出更是将性能提升做了最大的优化,更加易用、灵活、高效,未来是属于vue3的时代,因此深入了解vue3相对vue2在哪些方面做了性能提升,怎么提升性能的是非常有必要的。

编译阶优化段

在Vue2中,每个组件实例都对应一个 watcher 实例,它会在组件渲染的过程中把用到的数据property记录为依赖,当依赖发生改变,触发setter,则会通知watcher,从而使关联的组件重新渲染

假如一个vue组件有如下模板结构:

可以看到,组件内部只有一个动态节点,剩余一堆都是静态节点,所以这里很多 diff 和遍历其实都是不需要的,会造成性能浪费。因此,Vue3在编译阶段,做了进一步优化。主要有如下:

diff算法优化

vue3在diff算法中相比vue2增加了静态标记关于这个静态标记,其作用是为了会发生变化的地方添加一个flag标记,下次发生变化的时候直接找该地方进行比较,如下图

静态类型如下所示

静态提升

Vue3中对不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用这样就免去了重复的创建节点,大型应用会受益于这个改动,免去了重复的创建操作,优化了运行时候的内存占用

没有做静态提升之前

做了静态提升之后

静态内容_hoisted_1被放置在render 函数外,每次渲染的时候只要取 _hoisted_1 即可同时 _hoisted_1 被打上了 PatchFlag ,静态标记值为 -1 ,特殊标志是负整数表示永远不会用于 Diff

预字符串化

在平时vue开发过程中,组件当中没有特别多的动态元素,大多都是静态元素。比如:

在这个组件中,除了span元素是动态元素之外,其余都是静态节点,一般可以说是动静比,动态内容 / 静态内容,比例越小,静态内容越多,比例越大,动态内容越多,vue3的编译器它会非常智能地发现这一点,当编译器遇到大量连续的静态内容,会直接将它编译为一个普通字符串节点,因为它知道这些内容永远不会变化,都是静态节点。

然而在vue2中,每个元素都会变成虚拟节点,一大堆的虚拟节点😱,这些全都是静态节点,在vue3中它会智能地发现这一点。如下图所示,我们可以很明显的感受到vue3的巨大性能提升

缓存事件处理函数

比如存在如下事件处理函数

button @click="count++"plus/button

对比vue2和vue3的处理方式

在vue2中创建一个虚拟节点button,属性里面多了一个事件onclick,内容就是count++。在vue3中会认为这里的事件处理是不会变化的,不是说这次渲染是事件函数,下次就变成别的,于是vue3会智能地发现这一点,会做缓存处理,它首先会看一看缓存里面有没有这个事件函数,有的话直接返回,没有的话就直接赋值为一个count++函数,保证事件处理函数只生成一次。

SSR优化

当静态内容大到一定量级时候,会用createStaticVNode方法在客户端去生成一个static node,这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染。

编译前

编译后

源码体积有优化

与Vue2相比较,Vue3整体体积变小了,移除了一些比较冷门的feature:如 keyCode 支持作为 v-on 的修饰符、on、off 和 $once 实例方法、filter过滤、内联模板等。tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。任何一个函数,如ref、reavtived、computed等,仅仅在用到的时候才打包,没用到的模块都被摇掉,打包的整体体积变小。

响应式实现优化

改用proxy api做数据劫持

响应式是惰性的

vue组件性能优化(vue组件化优点),vue组件性能优化,1,第1张

Vue性能优化方法

Vue前端开发到第一阶段,就要开始考虑性能优化相关的要点了。这也是用来判断一名前端的水平是否优秀的一个标准。接下来这篇文章,将介绍几种在实践过程中可以用到的性能优化技巧(文中例子来自 )。

由于组件的生命周期处理在框架层面上十分耗时,所以,建议平常尽量使用函数型组件。这样,可以避免不必要的性能损失。只要在模板上声明 functional 属性,就可以实现函数式组件了:

另一个优化技巧是,将复杂的耗时计算处理放在子组件中进行处理:

平常在引用 computed 数据进行计算的时候,可以多使用局部变量,这样可以避免多次重复计算。

对于需要频繁切换的视图来说,使用 v-show 比 v-if 更加节约性能。因为 v-show 可以避免dom节点的销毁和重建,所以我们可以将如下的例子

改写为

另外一种很常用的优化技巧是使用 keep-alive ,通常是在路由切换组件中使用:

使用 keep-alive 后,可以保留组件状态并且避免重新渲染。

下面这个性能优化的点是前端通用的,可以用 requestAnimationFrame 分批次执行大数据量的计算,防止一次性执行的数据太大从而阻塞页面渲染。

比如下面这个例子:

可以改写为:

对于复杂的数据结构,我们可以显式声明为非响应式,这样可以避免很多不必要的计算,从而提高性能:

对于无限长列表来说,性能优化主要方法是保持仅渲染可视化部分。

来看一下下面这个例子:

这是最常见的写法,不过如果列表的内容很多,你就会发现页面十分的卡顿。此时大家可以利用 vue-virtual-scroller 这个组件,进行优化:

这样,可以大大提升组件的流畅度和性能。

vue性能优化,通过webpack

默认情况下,依赖项的所有第三方包都会被打包到js/chunk-vendors.******.js文件中,会导致该js文件过大,加载速度很慢。

我们可以通过externals排除这些包,使它们不被打包到js/chunk-vendors.******.js文件中,而是需要加载时去请求cdn资源。

vue.config.js里面配置configureWebpack,配置externals

这样完成后,再次打包,js文件会大大变小,加载速度非常棒。

使用vue-lazyload包,实现图片资源懒加载,组件懒加载

vue长列表性能优化

一、原因

当页面dom元素太多时浏览器渲染速度就会变慢,当浏览器内存不足时甚至会导致浏览器卡顿或者卡死等现象。因此对症下药,解决方案就是减少页面dom的渲染。

二、原理

可以通过按需进行加载dom,即只显示可视化区域的数量。从而减少dom的结构,实现性能提升。因此,分页加载、懒加载等方案根本治标不治本。

三、实现

此文章基于 vue-virtual-scroll-list 第三方插件,通过虚拟列表进行滚动加载数据。

2个关键的参数,分别是size和keeps。size属性指每一行高度,默认50px,keeps属性指每一行显示个数, 默认30个。

四、效果

vue组件性能优化的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于vue组件化优点、vue组件性能优化的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由飞速云SEO网络优化推广发布,如需转载请注明出处。

本文链接:http://csi-dataloggers.com/post/2080.html

分享给朋友:

“vue组件性能优化(vue组件化优点)” 的相关文章

宁波软件开发(宁波软件开发公司报价)

宁波软件开发(宁波软件开发公司报价)

今天给各位分享宁波软件开发的知识,其中也会对宁波软件开发公司报价进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、宁波金唐软件有限公司是外包吗 2、宁波有哪些较有实力的 软件公司啊? 3、宁波银行软件开发地址 4、软件开发项目,宁波技术开发人员,每...

成都软件开发培训(成都软件开发公司)

成都软件开发培训(成都软件开发公司)

今天给各位分享成都软件开发培训的知识,其中也会对成都软件开发公司进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、成都JAVA软件开发培训多少钱 2、成都的软件开发学校有哪些? 3、成都最好的软件开发培训机构叫什么名字? 4、成都的计算机编程培训学...

网站建设与管理(网站建设与管理试卷及答案)

网站建设与管理(网站建设与管理试卷及答案)

本篇文章给大家谈谈网站建设与管理,以及网站建设与管理试卷及答案对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、网站建设与管理出来可以做什么样的工作 2、网站建设与管理主要学什么 3、网站建设与管理 4、网站建设与管理专业描述 网站建设与管理出来可以做什么样的...

app软件开发(app开发培训)

app软件开发(app开发培训)

本篇文章给大家谈谈app软件开发,以及app开发培训对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、怎么开发app软件? 2、app是如何制作的,APP如何开发? 3、app软件开发怎么选择 4、开发app需要什么技术 5、如何开发一款app软件 6、...

视频直播软件开发(视频直播软件开发多)

视频直播软件开发(视频直播软件开发多)

本篇文章给大家谈谈视频直播软件开发,以及视频直播软件开发多对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、开发一个视频直播APP要多少钱 2、视频直播软件开发用到的流媒体技术主要有哪几种? 3、如何开发直播软件? 4、开发一个视频直播APP要多少钱? 5、...

135编辑器教学视频教程(135编辑器使用详细教程)

135编辑器教学视频教程(135编辑器使用详细教程)

本篇文章给大家谈谈135编辑器教学视频教程,以及135编辑器使用详细教程对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、135编辑器怎么使用? 2、135编辑器怎么上传本地视频? 3、135微信编辑器可以插曲本地视频吗?请问怎样操作? 4、135编辑器使用教程...