vue3性能提升主要通过哪几方面?

📝个人主页:爱吃炫迈
💌系列专栏:Vue
🧑‍💻座右铭:道阻且长,行则将至💗

文章目录

  • 编译优化
    • diff算法优化
      • 提取动态节点
    • 静态提升
    • 预字符串化
    • 缓存内联事件处理函数
    • SSR优化
  • 源码体积
  • 响应式系统


编译优化

编译优化指的是编译器将模版编译成渲染函数的过程中,尽可能多的提取关键信息,并以此指导生成最优代码的过程。
编译优化的策略与具体实现是由框架的设计思路决定的,不同的框架具有不同的设计思路,因此编译优化的策略也不尽相同。
但优化的方向是基本一致的,就是尽可能的区分静态内容动态内容,并根据不同的内容采用不同的优化策略。

diff算法优化

传统的Diff算法,在对比两颗虚拟DOM树的时候,总是要按照虚拟DOM的层级“一层一层”地遍历。
举个栗子:

<div id="foo"><p class="bar">{{text}}</p>
</div>

传统Diff在响应式数据text发生变化时,会生成一棵新的虚拟DOM树,传统的Diff算法对比新旧两颗虚拟DOM树的过程如下:

  1. 对比div节点,以及该节点的属性和子节点
  2. 对比p节点,以及该节点的属性和子节点
  3. 对比p节点的文本子节点,如果文本子节点的内容变了,则更新之,否则什么都不做

在上面这段模版中,变得只有p标签的文本子节点的内容,也就是说,其实当响应式数据变化的时候,最高效的更新方式就是直接设置p标签的文本内容,但传统的Diff算法显然做不到这么高效,存在很多无意义的对比操作,如果能跳过这些无意义的操作,性能会有很大的提升。这也就是vue3的编译优化的思路。

vue3的编译器可以分析出很多关键信息,例如哪些节点的静态的,哪些节点是动态的,编译器会将编译时得到的关键信息“附着”在它生成的虚拟DOM上,这些信息回通过虚拟DOM传递给渲染器。最终渲染器会根据这些关键信息执行“快捷路径”,从而提升运行时的性能。

所以vue3在diff算法中增加了静态标记pathFlag,这个标记表明这个节点是动态的会发生改变,下次发生改变的时候直接找该地方进行比较。
举个例子:

<div><div>foo</div><p>{{ bar }}</p>
</div>

传统的虚拟DOM描述上述模版:

const vnode = {tag: 'div',children: [{ tag: 'div', children: 'foo' },{ tag: 'p', children: ctx.bar },],
};

上述模版中只有{{ bar }}是动态的内容,但是虚拟DOM中没有任何标志能体现出节点的动态性。
但是经过编译优化后,编译器会将它提取到的关键信息“附着”在虚拟DOM节点上:

const vnode = {tag: 'div',children: [{ tag: 'div', children: 'foo' },{ tag: 'p', children: ctx.bar, patchFlag: 1 }, // 这是动态节点,],
};

可以看到用于描述p标签的虚拟DOM拥有一个额外的属性,patchFlag,它的值是一个数字。只要虚拟DOM存在该属性,我们就认为他是一个动态节点。这里的patchFlag就是所谓的补丁标志。

可以将补丁标志理解为一系列数字标记,并根据数字值的不同赋予它不同的含义,例如:

const PatchFlags {TEXT = 1,// 动态的文本节点CLASS = 1 << 1,  // 2 动态的 classSTYLE = 1 << 2,  // 4 动态的 stylePROPS = 1 << 3,  // 8 动态属性,不包括类名和样式FULL_PROPS = 1 << 4,  // 16 动态 key,当 key 变化时需要完整的 diff 算法做比较HYDRATE_EVENTS = 1 << 5,  // 32 表示带有事件监听器的节点STABLE_FRAGMENT = 1 << 6,   // 64 一个不会改变子节点顺序的 FragmentKEYED_FRAGMENT = 1 << 7, // 128 带有 key 属性的 FragmentUNKEYED_FRAGMENT = 1 << 8, // 256 子节点没有 key 的 FragmentNEED_PATCH = 1 << 9,   // 512DYNAMIC_SLOTS = 1 << 10,  // 动态 soltHOISTED = -1,  // 特殊标志是负整数表示永远不会用作 diffBAIL = -2 // 一个特殊的标志,指代差异算法
}

有了PatchFlag这个信息,就可以在虚拟DOM的创建阶段将它的动态子节点提取出来,并存到该虚拟节点的dynamicChildren数组中:

const vnode = {tag: 'div',children: [{ tag: 'div', children: 'foo' },{ tag: 'p', children: ctx.bar, patchFlag: patchFlags.TEXT }, // 这是动态节点,],// 数组dynamicChildren:[// p节点具有patchFlag属性,所以是动态节点{ tag: 'p', children: ctx.bar, patchFlag: patchFlags.TEXT }
]
};

上面的虚拟DOM对象与普通的虚拟DOM对象相比,多了一个额外的dynamicChildren属性。vue3中将拥有这个属性的虚拟DOM对象称为“块”,即Block。
所以一个Block的本质也是一个虚拟DOM对象,只不过比普通的虚拟DOM对象多出了一个用于存储动态子节点的dynamicChildren属性。
现在有个问题:就是如果不是Block的直接子节点,还能够收集吗?答案是yes!
举例说明:

<div><div><p>{{ bar}}</p></div>
</div>

最外层div标签对应的Block能够将p标签收集到它的dynamicChildren数组中:

const vnode = {tag: 'div',children: [{tag: 'div',children: [{ tag: 'p', children: ctx.bar, patchFlag: patchFlags.TEXT }],},],dynamicChildren: [// p节点具有patchFlag属性,所以是动态节点{ tag: 'p', children: ctx.bar, patchFlag: patchFlags.TEXT },],
};

有了Block这个概念之后,渲染器的更新操作将会以Block为维度。也就是说,当渲染器在更新一个Block的时候,会忽略虚拟DOM对象的children数组,而是直接找到虚拟DOM对象的dynamicChildren数组,并只更新该数组中的动态节点。
这样在更新的时候就实现了跳过静态内容,只更新动态内容。同时,由于动态节点中存在对应的补丁标志,所以在更新动态节点的时候,也能够做到靶向更新。例如,当一个动态节点的pathFlag值得数字为1时,我们知道他只存在动态的文本节点,所以只需要更新它的文本内容即可。

提取动态节点

未完待续·······

静态提升

静态提升能够减少更新时西黄建虚拟DOM带来的性能开销和内存占用。
举个例子:

<div><p>static text</p><p>{{title}}</p>
</div>

在没有静态提升的情况下,它对应的渲染函数是:

function render() {return (openBlock(),createBlock('div',null,[createVNode('p', null, 'static text'),createVNode('p', null, ctx.title, 1 /* TEXT */)]))
}

可以看到,在这段虚拟 DOM 的描述中存在两个 p 标签,一个是纯静态的,而另一个拥有动态文本。
当响应式数据 title 的值发生变化时,整个渲染函数会重新执行,并产生新的虚拟 DOM 树。
这个过程 有一个明显的问题,即纯静态的虚拟节点在更新时也会被重新创建一 次。很显然,这是没有必要的,所以我们需要想办法避免由此带来的性能开销。
而解决方案就是所谓的**“静态提升”**,即把纯静态的节点提升到渲染函数之外,如下面的代码所示:

// 把静态节点提升到渲染函数之外const hoist1 = createVNode('p', null, 'text')function render() {return (openBlock(), createBlock('div', null, [hoist1, // 静态节点引用createVNode('p', null, ctx.title, 1 /* TEXT */)]))
}

可以看到,当把纯静态的节点提升到渲染函数之外后,在渲染函 数内只会持有对静态节点的引用。当响应式数据变化,并使得渲染函 数重新执行时,并不会重新创建静态的虚拟节点,从而避免了额外的 性能开销。

有一个问题需要注意:
静态提升是以树为单位的,举例说明:

<div><section><p><span>abc</span></p></section >
</div>

在上面这段模板中,除了根节点的** div 标签会作为 Block 角色而不可被提升**之外,整个 元素及其子代节点都会被提升。
如果我们把上面模板中的静态字符串 abc 换成动态绑定的 {{ abc }},那么整棵树都不会被提升。
虽然包含动态绑定的节点本身不会被提升,但是该动态节点上任然可能存在纯静态的属性,例如:

<div><p foo="bar a=b">{{ text }}</p>
</div>

在上面这段模板中,p 标签存在动态绑定的文本内容,因此整个节点都不会被静态提升。但该节点的所有 props 都是静态的,因此在最终生成渲染函数时,我们可以将纯静态的 props 提升到渲染函数之 外,如下面的代码所示:

// 静态提升的 props 对象
const hoistProp = { foo: 'bar', a: 'b' }function render(ctx) {return (openBlock(), createBlock('div', null, [createVNode('p', hoistProp, ctx.text)]))
}

这样可以减少创建虚拟DOM产生的开销以及内存占用。

预字符串化

基于静态提升,我们还可以进一步曹勇预字符串化的优化手段。预字符串是基于静态提升的一种优化策略。静态提升的虚拟节点或虚拟节点树本身是静态的,那么就能将其预字符串化:

<div><p></p><p></p>// ... 20 个 p 标签<p></p>
</div>

假设上面的模板中包含大量连续纯静态的标签节点,当采用了静 态提升优化策略时,其编译后的代码如下:

cosnt hoist1 = createVNode('p', null, null, PatchFlags.HOISTED)cosnt hoist2 = createVNode('p', null, null, PatchFlags.HOISTED)// ... 20 个 hoistx 变量cosnt hoist20 = createVNode('p', null, null, PatchFlags.HOISTED)render() {return (openBlock(), createBlock('div', null, [hoist1, hoist2, /* ...20 个变量 */, hoist20]))
}

预字符串化能够将这些静态节点序列化为字符串,并生成一个 Static 类型的 VNode:

const hoistStatic = createStaticVNode('<p></p><p></p><p></p>...20 个...<p></p>')render() {return (openBlock(), createBlock('div', null, [hoistStatic]))
}

这样有很多的好处:

  • 大块的静态内容可以通过 innerHTML 进行设置,在性能上具有 一定优势。
  • 减少创建虚拟节点产生的性能开销。
  • 减少内存占用。

缓存内联事件处理函数

提到优化,就不得不提对内联事件处理函数的缓存。缓存内联事 件处理函数可以避免不必要的更新。假设模板内容如下:

<Comp @change="a + b" />

上面这段模板展示的是一个绑定了 change 事件的组件,并且为 change 事件绑定的事件处理程序是一个内联语句。对于这样的模板, 编译器会为其创建一个内联事件处理函数,如下面的代码所示:

 function render(ctx) {return h(Comp, {// 内联事件处理函数onChange: () => (ctx.a + ctx.b)})}

很显然,每次重新渲染时(即 render 函数重新执行时),都会 为 Comp 组件创建一个全新的 props 对象。同时,props 对象中 onChange 属性的值也会是全新的函数。这会导致渲染器对 Comp 组 件进行更新,造成额外的性能开销。
为了避免这类无用的更新,我们 需要对内联事件处理函数进行缓存,如下面的代码所示:

function render(ctx, cache) { return h(Comp, { // 将内联事件处理函数缓存到 cache 数组中 onChange: cache[0] || (cache[0] = ($event) => (ctx.a + ctx.b)) }) } 

渲染函数的第二个参数是一个数组 cache,该数组来自组件实 例,我们可以把内联事件处理函数添加到 cache 数组中。这样,当渲染函数重新执行并创建新的虚拟 DOM 树时,会优先读取缓存中的事件处理函数。这样,无论执行多少次渲染函数,props 对象中 onChange 属性的值始终不变,于是就不会触发 Comp 组件更新了。

SSR优化

未完待续·······

源码体积

相比Vue2,Vue3整体体积变小了,除了移出一些不常用的API,再重要的是Tree shanking
任何一个函数,如ref、reavtived、computed等,仅仅在用到的时候才打包,没用到的模块都被摇掉,打包的整体体积变小

import { computed, defineComponent, ref } from 'vue';
export default defineComponent({setup(props, context) {const age = ref(18)let state = reactive({name: 'test'})const readOnlyAge = computed(() => age.value++) // 19return {age,state,readOnlyAge}}
});

响应式系统

vue2中采用 defineProperty来劫持整个对象,然后进行深度遍历所有属性,给每个属性添加getter和setter,实现响应式
vue3采用proxy重写了响应式系统,因为proxy可以对整个对象进行监听,所以不需要深度遍历

  • 可以监听动态属性的添加
  • 可以监听到数组的索引和数组length属性
  • 可以监听删除属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/787640.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

YOLOv9有效改进专栏汇总|未来更新卷积、主干、检测头注意力机制、特征融合方式等创新![2024/4/1]

​ 专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&#xff0c;助力高效涨点&#xff01;&#xff01;&#xff01; 专栏介绍 YOLOv9作为最新的YOLO系列模型&#xff0c;对于做目标检测的同学是必不可少的。本专栏将针对2024年最新推出的YOLOv9检测模型&#xff0…

Python高级技术应用:解锁异步编程的威力与实践

在当今软件开发的领域中,异步编程已经成为一种重要的技术手段,特别是在处理高并发和I/O密集型任务时。Python作为一种功能丰富且灵活的编程语言,提供了多种方式来实现异步编程,如使用asyncio库、async/await关键字等。本文将深入探讨Python中异步编程的原理、优势以及实际应…

HackTheBox-Machines--Topology

文章目录 1 端口扫描2 漏洞探测三 权限提升 Topology 测试过程 1 端口扫描 nmap -sC -sV 10.129.23.122 漏洞探测 端口扫描发现22和80端口&#xff0c;访问80端口&#xff0c;发现LaTeX方程生成器&#xff0c;访问该按钮发现子域&#xff1a; latex.topology.htb。 将域名添加…

超图新建三维数据集继续学习

1 新建三维数据集 之前操作过新建三维数据集&#xff0c;还不熟悉&#xff0c;继续熟悉&#xff1b; 现在有一个文件型的数据源&#xff0c;名为swtest1&#xff1b;它前面小图标上有UDX三个字母&#xff0c;表明这是一个UDX类型的数据源&#xff1b;在此数据源上右击&#x…

李白打酒加强版(c++实现)

题目 话说大诗人李白&#xff0c;一生好饮。 幸好他从不开车。 一天&#xff0c;他提着酒壶&#xff0c;从家里出来&#xff0c;酒壶中有酒 2 斗。 他边走边唱&#xff1a; 无事街上走&#xff0c;提壶去打酒。 逢店加一倍&#xff0c;遇花喝一斗。 这一路上&#xff0c;…

【观察者模式】

观察者模式 什么是观察者模式&#xff1f; 观察者模式定义了对象之间的一种一对多依赖关系&#xff0c;允许多个观察者对象同时监听某一个主题对象。这种模式是事件驱动编程的核心&#xff0c;其主要目标是实现对象间的松耦合。松耦合的设计允许我们构建灵活的系统&#xff0…

SSH端口转发

SSH介绍 SSH通过网络远程访问主机提供保护&#xff0c;可以对客户端和服务端之间的数据传输进行压缩和加密&#xff0c;有身份验证、SCP、SFTP、和端口转发的功能 SSH转发常用的参数介绍&#xff1a; -C请求压缩所有数据-D动态转发、即socks代理-f后台执行SSH指令-g允许远程…

hxp CTF 2021 - A New Novel LFI(新颖的解法)

一、环境 unbentu&#xff0c;docker https://2021.ctf.link/assets/files/includers%20revenge-25377e1ebb23d014.tar.xz 二、解析 PHP Filter 当中有一种 convert.iconv 的 Filter &#xff0c;可以用来将数据从字符集 A 转换为字符集 B &#xff0c;其中这两个字符集可以…

极狐GitLab 13.11 重磅发布多项与 DevSecOps 相关的功能【五】

GitLab 是一个全球知名的一体化 DevOps 平台&#xff0c;很多人都通过私有化部署 GitLab 来进行源代码托管。极狐GitLab &#xff1a;https://gitlab.cn/install?channelcontent&utm_sourcecsdn 是 GitLab 在中国的发行版&#xff0c;专门为中国程序员服务。可以一键式部署…

我的一年创作纪念日

机缘 实际上在之前的文章之中我已经介绍过自己与csdn的缘分了&#xff0c;当初对算法十分的痴迷&#xff0c;也很希望能够将自己的一些理解写在csdn上&#xff0c;所以就开始了在csdn上的写作。 收获 在创作过程中最大的收获还是对过去所学的知识的总结吧&#xff0c;可惜的就…

蓝桥杯算法题-图形排版

题目描述 小明需要在一篇文档中加入 N 张图片&#xff0c;其中第 i 张图片的宽度是 Wi&#xff0c;高度是 Hi。   假设纸张的宽度是 M&#xff0c;小明使用的文档编辑工具会用以下方式对图片进行自动排版&#xff1a; 1. 该工具会按照图片顺序&#xff0c;在宽度 M 以内&…

企业客户信息反馈平台的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文档)

本项目包含可运行源码数据库LW&#xff0c;文末可获取本项目的所有资料。 推荐阅读300套最新项目持续更新中..... 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 2024年56套包含ja…

《数据结构学习笔记---第九篇》---循环队列的实现

文章目录 1.循环队列的定义 2.循环队列的判空判满 3.创建队列并初始化 4.入队和出队 5. 返回队尾队首元素 6.释放循环队列 1.循环队列的定义 定义&#xff1a;存储队列元素的表从逻辑上被视为一个环。 我们此次实现的循环队列&#xff0c;采用顺序表 typedef struct {int…

Xception模型详解

简介 Xception的名称源自于"Extreme Inception"&#xff0c;它是在Inception架构的基础上进行了扩展和改进。Inception架构是Google团队提出的一种经典的卷积神经网络架构&#xff0c;用于解决深度卷积神经网络中的计算和参数增长问题。 与Inception不同&#xff0…

图像生成:SD lora加载代码详解与实现

文章目录 前言一、SD模型介绍二、模型加载1. 模型架构加载2. safetensors权重加载3. lora权重加载 三、Name匹配四、权重融合1、构建net类2、匹配lora weight和model weight3、基于lora权重创建lora模块4、权重融合 五、整体pipeline总结 前言 SD中lora的加载相信都不陌生&…

VSCode美化

今天有空收拾了一下VSCode&#xff0c;页面如下&#xff0c;个人觉得还是挺好看的~~ 1. 主题 Noctis 色彩较多&#xff0c;有种繁杂美。 我使用的是浅色主题的一款Noctis Hibernus 2. 字体 Maple Mono 官网&#xff1a;Maple-Font 我只安装了下图两个字体&#xff0c;使…

堆积排序python实现

堆积排序(Heap Sort)是一种基于二叉堆的排序算法。Python语言实现堆积排序算法可以如下所示: def heapify(arr, n, i):largest = i # Initialize largest as rootl = 2 * i + 1 # left = 2*i + 1r = 2 * i + 2

Java常用API之Encoders类解读

写在开头&#xff1a;本文用于作者学习Java常用API 我将官方文档中Collections类中所有API全测了一遍并打印了结果&#xff0c;日拱一卒&#xff0c;常看常新 在Spark中&#xff0c;Encoders类提供了一些静态方法用于创建不同数据类型的编码器。 首先&#xff0c;我遇到这样…

区块链面试题总结

1、什么是区块链&#xff1f; 区块链是不间断的经济交易数字分类账&#xff0c;可以进行编程&#xff0c;以记录不止金融交易&#xff0c;还可以记录其他有价值的东西&#xff0c;简单来说&#xff0c;区块链是一个不可变记录的分布式数据库&#xff0c;该数据库由计算机集群来…

今后的推进计划方针

今后的推进计划方针 信息数学物理 信息 线段树&#xff0c;其它的随缘。 数学 三角函数&#xff08;必修3&#xff09;-> 对数函数和指数函数 物理 随缘