vue组件性能优化(vue组件化优点)
本篇文章给大家谈谈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前端开发到第一阶段,就要开始考虑性能优化相关的要点了。这也是用来判断一名前端的水平是否优秀的一个标准。接下来这篇文章,将介绍几种在实践过程中可以用到的性能优化技巧(文中例子来自 )。
由于组件的生命周期处理在框架层面上十分耗时,所以,建议平常尽量使用函数型组件。这样,可以避免不必要的性能损失。只要在模板上声明 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组件性能优化的信息别忘了在本站进行查找喔。