VUE2.0 模板编译原理（二）：优化器

最新推荐文章于 2023-07-18 08:30:00 发布
原创 最新推荐文章于 2023-07-18 08:30:00 发布 · 377 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

本文介绍了Vue2.0模板编译的优化器部分，主要关注如何找出并标记静态节点和静态根节点。静态节点在后续渲染中会被复用，减少DOM操作；静态根节点的标记有助于跳过不必要的比较，提升性能。优化主要包括两步：一是遍历AST标记所有静态节点，二是标记静态根节点。这一过程在src/compiler/optimizer.js中实现。

接上一篇内容： VUE2.0 模板编译原理（一）：解析器

二、优化器

优化器的作用是在AST中找到静态子树并打上标记，即那些永远不会发生变化的节点，例如纯文本节点。

打标记的作用：

  • 在生成VNode的过程中，除了首次渲染，每次重新渲染，不需要为静态子树创建新节点，会直接克隆已存在的静态子树；

  • 虚拟DOM的patch过程中可以跳过，因为没有比较的必要，它是不变的，节省js脚本运算成本。

实现的主要步骤：

  • 在AST中找到所有静态节点并标记；

  • 在AST中找到所有静态根节点并标记。

在AST中，static属性为true的就是静态节点，比如<p>啊哈哈哈</p>。

静态根节点意思是所有子节点是静态节点，父节点是动态的，那么自己就是静态根节点，staticRoot为true。

实现源码在src/compiler/optimizer.js文件中。

1、找出所有静态节点并标记

也就是markStatic(root)函数，通过isStatic(node)来判断当前节点是否为静态节点，如果type是1，说明节点是元素节点，那么循环递归改节点的子节点。type是2说明是带变量的文本节点，static将是f

最低0.47元/天 解锁文章
Vue2.0 源码：11个重要源码原理一览
青轩桃李能几何，流光欺人忽蹉跎
08-06 1072
这个过程会生成一段 JavaScript 代码，该代码可以在运行时根据动态数据生成真实的虚拟 DOM。在生成 render 函数的过程中，编译器会生成一系列的代码片段来描述模板的结构和逻辑。这些代码片段包括创建元素（createElement）、设置属性（setAttribute）、添加子节点（appendChild）等操作。通过组合这些代码片段，最终生成一个 render 函数，该函数接受一个参数作为数据输入，并返回一个虚拟 DOM 节点（VNode）作为输出。
VUE2.0 模板编译原理（一）：解析器
denglouhen的博客
10-20 1362
vue的template里可以填充变量、表达式、指令，这些在HTML没有的功能就是靠模板编译实现的。模板编译的作用就是将模板转换为渲染函数，渲染函数执行的时候都会生成当前最新的vnode进行页面渲染。 模板--[输入]-->模板编译--[输出]-->渲染函数 这个过程分为三个步骤： 1、解析器：模板解析成AST（抽象语法树）； 2、优化器：遍历AST标记静态节点，这样在虚拟DOM更新节点时避免重新渲染静态节点； 3、代码生成器：使用AST生成render函数。 一、解析
[Vue源码解析] 优化器
zy的博客
11-28 157
[Vue源码解析] 优化器 优化器作用：在AST中找出静态子树并打上标记 好处：1、每次重新渲染时，不需要为静态子树创建新节点。 2、在虚拟DOM中打补丁（patching）的过程可以跳过。 步骤：1、在AST中找出所有静态节点并打上标记（static：true），若当前节点为静态节点，则其所有子节点也需要为静态节点。 2、在AST中找出所有静态根节点并打上标记（staticRoot：true），AST中从上往下寻找，找到静态节点则标记为静态根节点，由于1的特性，其子节点也为静态节点。 判断是否是静态节点：
Vue2.0模板编译原理
MiemieWan的博客
12-29 797
一、模板编译 Vue.js通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。 模板编译成渲染函数分为三部分（解析器、优化器、代码生成器）： 将模板解析成AST（Abstract Syntax Tree,抽象语法树） 遍历AST标记静态节点。这样在虚拟DOM中更新节点时，如果发现有静态标记，则不会重新渲染它。 使用AST生成渲染函数 二、解析器 解析器内部分了好几个子解析器，比如HTML解析器、文本解析器以及过滤...
vue源码学习（五）模板编译之优化器
zxl1990_ok的博客
12-01 1336
vue源码版本为2.6.11（cdn地址为：https://lib.baomitu.com/vue/2.6.11/vue.js） Vue.delete 源码如下： function del (target, key) { if (isUndef(target) || isPrimitive(target)) { console.warn(("Cannot delete reactive property on undefined, null, or primitive..
Vue 源码解读（9）—— 编译器 之 优化
Guolicheng_的博客
08-18 243
前言 上一篇文章 Vue 源码解读（8）—— 编译器 之 解析 详细详解了编译器的第一部分，如何将 html 模版字符串编译成 AST。今天带来编译器的第二部分，优化 AST，也是大家常说的静态标记。 目标 深入理解编译器的静态标记过程 源码解读 入口 /src/compiler/index.js /** * 在这之前做的所有的事情，只有一个目的，就是为了构建平台特有的编译选项（options），比如 web 平台 * * 1、将 html 模版解析成 ast * 2、对 ast 树进行静态标
vue2.0-typescript-element-admin:这是一个后台管理系统模板
03-08
打字稿vue2.0元素 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
Vue2.0-hezhen:Vue2.0原型重写，包含响应式，模板编译，组件以及diff算法重要部分，带注释
03-23
**模板编译：** Vue 使用HTML-like模板来定义UI，这些模板在运行时被编译成虚拟DOM（Virtual DOM）。Vue的模板编译过程包括解析（parsing）、优化（optimization）和生成（generation）。解析阶段将模板字符串转化为...
Vue 2.0与Vue 3.0入门：实例创建与模板解析
在Vue3.0中，Vue的API和模板编译机制有所优化，使得代码更加简洁和高效。 ### 结论 在实际开发中，Vue2.0和Vue3.0都强调了响应式数据绑定和模板的灵活性。尽管两者在语法上有细微差别，但核心思想保持一致，即通过...
深入浅出Vue.js阅读——模板编译原理——优化器
从人到猿
12-02 267
解析器的作用是将HTML模板解析成AST，优化器的作用是在AST中找出静态子树并打上标记。
Vue2.x源码——优化器
白水煮青菜的博客
03-08 390
在vue.js模板编译中，优化器的作用就是将解析器解析出来的AST进行进一步处理，找出AST中的静态节点并打上标记，这些静态节点没有使用任何变量，在首次渲染之后，它的状态都不会再发生变化了，每次重新渲染时都不需要为静态节点创建新的虚拟节点，在更新时也可以跳过静态节点的更新流程，不需要重复渲染，提升了性能。 /** * Goal of the optimizer: walk the generat...
Vue2.0源码解析——编译原理
Hi,印象钟情
03-21 389
实际上Vue最终在渲染函数的时候是通过js进行渲染的，Vue封装了所有创建DOM的操作，基于虚拟dom来渲染真实dom（真实dom包含太多无用属性，操作起来太消耗性能），因此创建一个虚拟dom对这个虚拟dom进行操作，最后生成一个最终的虚拟dom,然后利用js创建dom的方法生成真实dom。那是以因为当我们在书写出一个Vue的模板的时候，Vue会在内部做一个编译的过程，这个过程就是把我们写的浏览器不认识的带有指令版本的模板(中可以找到所有创建DOM的方法，而这些方法最终会被引用用于创建真正的DOM。
Vue源码阅读（13）：优化器
f18855666661的博客
07-08 298
优化器的逻辑相比解析器简单了很多，其只做了两件事：标记静态节点和标记静态根节点，所以理解起来会轻松很多。 为什么要做优化操作呢？因为在一个 Vue 应用中，有些页面内容是不随数据的改变而改变的，这些页面内容只需要在初次渲染的时候渲染一次就可以了，所以需要借助优化器打个静态的标记，这样在 patch 的环节，就可以直接跳过静态节点，提高性能。 这一小节，代码解释都在注释中，我写的很详细。 1，src/compiler/optimizer.js ==>optimize export fun.
【Vue2.0源码学习】模板编译篇-模板解析阶段(优化阶段)
一个前端开发者
07-18 500
在前几篇文章中，我们介绍了模板编译流程三大阶段中的第一阶段模板解析阶段，在这一阶段主要做的工作是用解析器将用户所写的模板字符串解析成AST抽象语法树，理论上来讲，有了AST就可直接进入第三阶段生成render函数了。其实不然，Vue还是很看重性能的，只要有一点可以优化的地方就要将其进行优化。
Vue2.0源码（二）模板编译原理
06-29 445
上一篇文章主要介绍了 Vue 数据的响应式原理，今天我们主要说的是模板编译原理，主要涉及到 ast 以及大量正则匹配 // Vue实例化 new Vue({ el: "#app", data() { return { a: 111, }; }, // render(h) { // return h('div',{id:'a'},'hello') // }, // template:`<div id="a">hello</di.
VUE源码学习第八篇--编译(optimize)
恰恰虎的博客
06-23 866
一、总述 上一章节我们讲到通过解析将template转成AST模型树，接下来继续对模型树优化，进行静态标注。那么问题来了，什么是静态标注？为什么要静态标注。 在源码的注释中我们找到了下面这段话： /** * Goal of the optimizer: walk the generated template AST tree * and detect sub-trees that ar...
Vue源码 编译（三）optimize 优化AST树
陈坚泓的博客
03-13 917
Vue源码 编译（三）optimize 优化AST树Vue源码 编译（三）optimize 优化AST树optimize标记静态节点标记静态根总结Vue源码学习目录 Vue源码 编译（三）optimize 优化AST树 学习内容和文章内容来自 黄轶老师 黄轶老师的慕课网视频教程地址:《Vue.js2.0 源码揭秘》、 黄轶老师拉钩教育教程地址:《Vue.js 3.0 核心源码解析》 这里分析的源码是Runtime + Compiler 的 Vue.js 调试代码在:node_modules\vue\dis
Vue源码学习之优化器的原理与实现
u010651383的专栏
02-18 283
本人上一篇博文里分析了一下Vue中的模板编译器的原理及其实现方式（如果感兴趣可以去看一下：Vue源码学习之模板编译器原理），如果把Vue看成一辆跑车，模板编译器可以看做是跑车的底盘，那么优化器便可以看做是一种更为轻便的合金材料，跑车没有这种材料，依旧能够正常行驶，但如果将跑车的底盘换成这种材料，便可以使得整个车身更加轻盈，跑得更快。优化器起到的便是通过将生成的抽象语法树中的一些静态节点（所谓静态...
＜深入浅出Vuejs＞模板编译_解析器&优化器&生成器
VIRUSESCZ的博客
04-08 867
＜深入浅出Vuejs＞模板编译_解析器&优化器&生成器
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值