AST抽象语法树和虚拟DOM的区别

最新推荐文章于 2025-07-28 09:44:31 发布
原创 最新推荐文章于 2025-07-28 09:44:31 发布 · 474 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #html

部署运行你感兴趣的模型镜像

文章目录

概要

AST抽象语法树和虚拟DOM的区别

基本概念

  1. AST： AST是源代码的抽象语法结构的树状表现形式，它将编程语言的复杂性抽象化，使得可以在不同的编译器之间移植代码。
    AST通常用于代码转换、代码优化、代码生成等任务中。

  2. 虚拟DOM：虚拟DOM是真实DOM的对应体，它是一个纯JavaScript对象，用于描述DOM的树状结构。
    主要目的是提高页面的渲染效率，通过减少对真实DOM的操作来提高性能。

区别

AST是对源代码的抽象，而虚拟DOM是对DOM结构的抽象
AST主要用于代码的分析和转换，而虚拟DOM主要用于提高页面渲染性能
创建和操作AST比创建和操作虚拟DOM要复杂得多，因为它涉及到编译器和解释器的概念

您可能感兴趣的与本文相关的镜像

Seed-Coder-8B-Base

Seed-Coder-8B-Base

文本生成
Seed-Coder

Seed-Coder是一个功能强大、透明、参数高效的 8B 级开源代码模型系列，包括基础变体、指导变体和推理变体，由字节团队开源

【虚拟Dom】详解vue虚拟Dom，diff算法，应用场景
代码的魅力，根本走不出来
04-13 728
虚拟 DOM（Virtual DOM）是一种将浏览器 DOM 树结构在内存中用 JavaScript 对象表示的技术，它将虚拟 DOM 作为中间层，在 JavaScript 对象和实际 DOM 之间建立了一个桥梁，通过对虚拟 DOM 的操作来更新实际 DOM，从而减少直接操作 DOM 对性能的影响。Vue.js 也是通过虚拟 DOM 实现数据的双向绑定。
Vue挂载过程原理-生成AST抽象语法树
weixin_48819493的博客
10-15 598
AST语法树 ，Vue挂载流程
虚拟DOM详解
weixin_34345753的博客
12-16 175
虚拟DOM简介 　　Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树，其主要是通过vnode,实现一个无状态的组件，当组件状态发生更新时，然后触发Virtual Dom数据的变化，然后通过Virtual Dom和真实DOM的比对，再对真实DOM更新。虚拟DOM其实就是一种模拟DOM的JavaScript数据结构。 　　像SnabbDOM这种库的虚拟DOM是如下的数据...
vue底层原理知识点梳理
mhc20201554114的博客
04-13 2336
考完蓝桥杯后的最近这段时间里，在继续学习vue底层相关的知识。 东西不少，而且有点复杂，感觉自己虽然看了不少文章和视频，但是学习到的还是比较浅层的知识，这篇文章就先对我学过的知识点进行一下大致的梳理吧。 1.虚拟dom （1）虚拟dom即非真实的dom，它并非一个dom树，可以将它看做一个js对象，将dom树的结构转换为一种特定的格式的对象。 （2）使用虚拟dom并不会比直接改真实dom更快，反而因为中间加了虚拟dom这一步骤而让过程变慢，真正优化其性能的是因为虚拟dom的存在，可以将原先每次更改重新
h5新特性&DOM&AST的简单理解
chonyhaha的博客
10-25 516
h5新特性 1、一些语义化标签 header、footer、nav、aside、article、section、hgroup（h1~h6的集合） document.createElement(‘header’) 2、本地存储 提供了sessionStorage、localStorage和indexedDB加强本地存储，使用之前应该先判断支持情况 if(window.sessionStorage){ } if(window.localStorage){ } localStorage与sessionStorag
虚拟dom
qq_37708342的博客
04-19 300
虚拟dom的实现 ​ Vue2的Virtual DOM借鉴了开源库snabbdom的实现。用JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中 当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异 把所记录的差异应用到所构建的真正的DOM树上，视图就更新了。 Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。 虚拟dom的优点 前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅
Vue2中的AST与虚拟DOM详解：从模板编译到Diff算法
最新发布
Yue
07-28 667
文章摘要： 本文解析了Vue.js 2.x中AST(抽象语法树)与虚拟DOM的核心概念及相互关系。AST作为模板编译的中间产物，反映模板语法结构，用于生成渲染函数；虚拟DOM则是运行时生成的轻量级DOM表示，用于高效更新真实DOM。文章详细阐述了Vue2的完整模板编译流程，包括从模板解析到AST生成、优化处理、代码转换为渲染函数，最终生成虚拟DOM并执行Diff算法更新DOM的过程。重点分析了Render函数的作用与结构，以及Vue2基于Snabbdom优化的Diff算法，包括其双端比较策略和key的重要性
本项目主要为：1._vue2源码学习代码（响应式，虚拟Dom和DIff算法，
09-09
本项目即是对 Vue.js 2.x 版本的源码进行深入学习和探究，主要涵盖以下几个方面：响应式系统的实现原理、虚拟 DOM 的构建过程以及 Diff 算法的内部工作机制，此外还包括 AST 抽象语法树的解析过程。 首先，Vue.js ...
实现一个简单的HTML到虚拟DOM编译器
这个项目虽然被定义为“玩具级”，意味着其功能相对简化、不追求生产环境的完备性，但其背后所涵盖的知识体系却极为丰富，包括词法分析、语法分析、抽象语法树（AST）构建、HTML 解析原理、虚拟 DOM 的设计思想以及...
一个玩具级的HTML转虚拟DOM编译器
08-10
1. **解析HTML字符串**：首先，编译器需要解析输入的HTML字符串，将其分解成一个由元素、属性和文本节点组成的抽象语法树（AST，Abstract Syntax Tree）。 2. **构建虚拟DOM树**：接着，根据解析得到的AST，编译器...
Vue源码解析之Template转化为AST的实现方法
12-11
什么是AST 在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。 Virtual Dom Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路。 Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 本文通过对源码中AST转化部分进行简单提取，因为源码中转化过程
AST和Virtual DOM
xiaoyuer_2020的博客
02-14 308
AST（Abstract Syntax Tree，抽象语法树）是对编程语言的语法结构的描述，而虚拟dom是对dom节点的描述。AST表示的是源代码的语法结构，而virtual dom表示的是页面上需要现实的dom元素及其状态。而虚拟Dom 只会在 运行时出现，用来描述整个 DOM 树，每个render周期会产生一次虚拟Dom。AST 只会在 编译阶段 出现。它主要用来描述 template 模版。
Vue中的AST和VNode有什么区别啊？看着都长的一个样?
weixin_45821809的博客
03-03 799
Vue中的AST和VNode的区别
虚拟DOM和真实DOM的区别
热门推荐
CaseyWei
08-08 1万+
虚拟DOM与真实DOM的区别（注意：需不需要虚拟DOM，其实与框架的DOM操作机制有关）： 虚拟DOM不会进行排版与重绘操作 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分（注意！），最后并在真实DOM中进行排版与重绘，减少过多DOM节点排版与重绘损耗 真实DOM频繁排版与重绘的效率是相当低的 虚拟DOM有效降低大面积（真实DOM节点）的重...
虚拟DOM分析学习篇
Dear_Mr的博客
05-20 646
昨天分享了一篇关于“虚拟DOM”的文章，但是今天感觉自己还是放不下它，决定细细探究一下整体结构分析创建的目录结构如下：首先初始化package.json文件: npm init然后全局安装Browserify ：npm install -g browserify最后使用browserify编译：browserify main.js > compiled.js各个文件之间的关系： 各个文件的作用的分
什么是抽象语法树(AST）
Winn~
02-22 4080
原创： 弗拉 码农翻身 作者： 弗拉@重度前端 https://segmentfault.com/a/1190000017992387 已经获得作者独家授权发布，老刘做了改编。 张大胖一上班，领导就扔了一个任务给他，把项目中的JavaScript代码做点“小小”的改变： 把 == 改为全等 === 把parsetInt不标准的调用改为标准用法 parseInt(xxx)-> p...
Vue源码解析--AST抽象语法树
果车的博客
02-09 3903
一、概念介绍： 在开发Vue的时候编译器会将模板语法编译成正常的HTML语法，而直接编译的时候是非常困难的，因此此时会借助AST抽象语法树进行周转，进而变为正常的HTML语法，使编译工作变得更加简单。 抽象语法树的本质上是一个JS对象，Vue在审视所有HTML结构时是以字符串的新式进行的，最终将其解析为JS对象。AST抽象语法树服务于模板编译，将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法，自己作为中转站。 二、抽象语法树与虚拟DOM节点的关系： 图示： 抽..
【Vue】vue，AST，render，virtual dom的关系？
LAFINSIR的博客
05-31 331
*
vue源码学习——虚拟dom树是如何定义的
titoni_yunruohan的博客
11-05 715
情景：相信通过前面的学习你已经知道了虚拟dom为什么会被构思，那么接下来你好奇的应该是作者该如何定义这个虚拟dom vnode基类的定义(源码地址https://github.com/vuejs/vue/blob/52719ccab8fccffbdf497b96d3731dc86f04c1ce/src/core/vdom/vnode.js) export default class VNode...
自定义AST模板：掌握JSON语法树结构
在软件开发领域，抽象语法树（Abstract Syntax Tree，简称AST）是一种用来表示源代码结构的树状模型。它能够将源代码分解成各个组成部分，这些部分通常包括表达式、声明、语句和各种控制结构。每种编程语言都有自己...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值