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

于 2024-07-01 17:30:51 发布
阅读量181 收藏
点赞数 1
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/eric_web/article/details/140105124
版权

文章目录

概要

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

基本概念

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

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

区别

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

进阶的前端小弟
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一个玩具级的HTML转虚拟DOM编译器
08-10
1. **解析HTML字符串**：首先，编译器需要解析输入的HTML字符串，将其分解成一个由元素、属性和文本节点组成的抽象语法树（AST，Abstract Syntax Tree）。 2. **构建虚拟DOM树**：接着，根据解析得到的AST，编译器...
Vue挂载Dom与映射真实Dom流程
wyh666csdn的博客
01-10 835
vue：template标签解析时，1.将模板字符串通过parse函数转换成为AST（抽象语法树)2.将AST通过generate函数转换成为render函数3.在这个render函数中又有很多h函数（createElement函数），调用这些h函数生成一个又一个对象，这些对象互相存在联系从而生成虚拟dom树。
vue底层原理知识点梳理
mhc20201554114的博客
04-13 2154
考完蓝桥杯后的最近这段时间里，在继续学习vue底层相关的知识。 东西不少，而且有点复杂，感觉自己虽然看了不少文章和视频，但是学习到的还是比较浅层的知识，这篇文章就先对我学过的知识点进行一下大致的梳理吧。 1.虚拟dom （1）虚拟dom即非真实的dom，它并非一个dom树，可以将它看做一个js对象，将dom树的结构转换为一种特定的格式的对象。 （2）使用虚拟dom并不会比直接改真实dom更快，反而因为中间加了虚拟dom这一步骤而让过程变慢，真正优化其性能的是因为虚拟dom的存在，可以将原先每次更改重新
Vue源码解析--AST抽象语法树
果车的博客
02-09 3573
一、概念介绍： 在开发Vue的时候编译器会将模板语法编译成正常的HTML语法，而直接编译的时候是非常困难的，因此此时会借助AST抽象语法树进行周转，进而变为正常的HTML语法，使编译工作变得更加简单。 抽象语法树的本质上是一个JS对象，Vue在审视所有HTML结构时是以字符串的新式进行的，最终将其解析为JS对象。AST抽象语法树服务于模板编译，将一种语法翻译为另一种语法。在Vue中将模板语法编译为HTML语法，自己作为中转站。 二、抽象语法树与虚拟DOM节点的关系： 图示： 抽..
Vue源码剖析(一)：抽离AST抽象语法树
qq_44746132的博客
05-15 1461
Vue源码剖析，针对Vue2.x的Vue框架源码，描述相应的核心实现并简单实现具体的流程 今天说的是如何将编写的模板语法，抽离成框架处理的AST语法树 Vue是一个面向视图层的渐进式前端框架，它推荐用户使用不同的状态控制页面元素，而减少用户对DOM元素的直接操作。在Vue中，比较核心的两块内容：虚拟DOM， DIFF算法。 关于虚拟DOM：虚拟DOM其实直白一点的说法就是使用js对象来描述我们的真实DOM元素及元素间的关系。而关于AST抽象语法树则是使用JS对象来描述原生的语法，二者稍有区别： // A
什么是抽象语法树(AST）
Winn~
02-22 3863
原创： 弗拉 码农翻身 作者： 弗拉@重度前端 https://segmentfault.com/a/1190000017992387 已经获得作者独家授权发布，老刘做了改编。 张大胖一上班，领导就扔了一个任务给他，把项目中的JavaScript代码做点“小小”的改变： 把 == 改为全等 === 把parsetInt不标准的调用改为标准用法 parseInt(xxx)-> p...
Vue中的AST和VNode有什么区别啊？看着都长的一个样?
weixin_45821809的博客
03-03 635
Vue中的AST和VNode的区别
Vue源码解析之Template转化为AST的实现方法
10-17
当Vue实例挂载时，模板会经过一系列编译过程，最终转换成抽象语法树（AST）和渲染函数，以实现虚拟DOM（Virtual DOM）的构建。这一过程对于理解和优化Vue应用的性能至关重要。 首先，我们来看什么是AST。抽象语法树...
Vue AST源码解析第一篇
08-29
在Vue的源码中，AST（抽象语法树，Abstract Syntax Tree）扮演着重要的角色，特别是在编译和渲染过程中。本篇文章将聚焦于Vue AST源码解析的第一部分，特别是与DOM操作相关的部分。 首先，Vue实例的初始化过程始于`...
用vnode描述一个DOM的结构.docx
03-12
1. **模板转换**：首先，Vue将模板（template）转换成抽象语法树（AST），这是一个解析后的中间表示，描述了模板的结构。 2. **代码生成**：然后，Vue会将AST转换成一个`render`函数，这个函数使用`_c`（即`...
h5新特性&DOM&AST的简单理解
chonyhaha的博客
10-25 439
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
第四十一周总结——AST抽象语法树
1514的博客
04-13 862
AST抽象语法树 index.js index.js文件是入口文件，主要调用parse.js文件来将DOM字符串转换成ast抽象语法树。 import parse from "./ast/parse"; var tempalteString = `<div><div></div></div><div></div>` const ast = parse(tempalteString) console.log(ast); parse.j
vue底层原理-AST抽象语法树实现思路
yan_Wylde的博客
06-17 592
1.为什么要使用抽象语法树 在开发Vue的时候编译器会将模板语法编译成正常的HTML语法，而直接编译的时候是非常困难的，因此此时会借助AST抽象语法树进行周转，进而变为正常的HTML语法，使编译工作变得更加简单。 抽象语法树实际上就是一个对象。vue将模板语法视为普通的字符串，并将其解析为JS对象。 例：  2.抽象语法树与虚拟DOM之间的关系 抽象语法树的终点是渲染函数（h函数）。 渲染函数（h函数）,它既是AST的产物，也是vnode(虚拟节点)的起源。h函数里面是不含指令的。
虚拟 DOM 详解
TongJ_的博客
02-20 3212
虚拟 dom 本质上就是一个普通的 JS 对象，用于描述视图的界面结构 在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟 dom 树，这也就意味着每个组件都对应一棵虚拟 DOM 树
前端人不得不谈的虚拟DOM
发果叁
10-15 640
在学习虚拟DOM的过程中，从它产生的原因出发，分析它的特点和优势以及应用场景，研究虚拟DOM对象属性，并引出虚拟DOM的原理和实践方式。最后从react和vue的内部实现引出snabbdom和preact两个第三方包，后续将先从这两个包出发，学习各自的虚拟DOM原理，为阅读react和vue的源码做准备。整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享。
AST(抽象语法树)超详细
热门推荐
Yi Sun的博客
07-15 15万+
自己研究的东西会用到AST，就自己通过查阅资料，整理一下。 本文目录 第一部分：AST的作用 第二部分：AST的流程 第三部分： Eclipse AST的获取与访问 第一部分：AST的作用 首先来一个比较形象的，转载自：AST-抽象语法树，讲述了为什么需要讲源代码转化为AST，总结就是：AST不依赖于具体的文法，不依赖于语言的细节，我们将源代码转化为AST后，可以对AST做很多的操作，...
vue中的虚拟dom实现
最新发布
04-04
Vue中的虚拟DOM实现基于Snabbdom库，其实现过程如下： 1. 将模板解析为AST（抽象语法树），并生成对应的渲染函数。 2. 在渲染函数中，创建虚拟DOM节点（VNode），并将其与原始数据进行绑定。 3. 当数据发生变化时，重新执行渲染函数生成新的虚拟DOM节点。 4. 通过比较新旧虚拟DOM节点，确定需要进行更新的部分，并将其更新到真实的DOM树上。 5. 更新完成后，将新的虚拟DOM节点保存为旧的节点，供下一次比较使用。 通过使用虚拟DOM，Vue可以避免频繁操作真实的DOM，提高性能并减少浏览器重绘的次数，从而提升用户体验。同时，Vue的虚拟DOM实现也支持key值的比较和处理，使得在列表中添加、删除、移动元素时能够更加高效地更新视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值