vue3.0是如何做的速度提升的?

6 篇文章 0 订阅
2 篇文章 0 订阅

一.diff算法优化;

vue2.X中的dom是进行全量对比渲染(对应的所有dom都对比一遍,增加了对比次数和渲染速度);

vue3.0添加了静态标记(与上次dom节点对比的时候,只对比有静态标记的dom进行渲染)

在这里插入图片描述
在这里插入图片描述

二.hoistStast 静态提升

vue2.x无论元素是否参与更新,每次都要重新创建,然后渲染;

vue3.0中对于不参与更新的元素,会做静态提升,只会被创建一次,在渲染时直接复用即可;

三.cacheHandlers 事件侦听器缓存

vue2.x默认情况下onClick 会被视为动态绑定,所以每次都会去追踪它的变化;

vue3.0 因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可;

四,ssr渲染

vue2.x 当有大量静态的内容时,这些内容会被当做纯字符串推进一个buffer里面,

即使存在动态的绑定,会通过模板 插值嵌入进去,这样会比通过虚拟dom来渲染的快很多

vue3.0 当静态文件大到一定量的时候,会用_ceratStaticVNode方法在客户端去生成一个static node,

这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值