Babel的工作原理 h5页面通过浏览器怎么渲染的?

it2026-08-16  7

babel的工作原理

babel的包构成

核心包
babel-core:babel转译器本身,提供了babel的转译API,如babel.transform等,用于对代码进行转译。像webpack的babel-loader就是调用这些API来完成转译过程的。 babylon:js的词法解析器 babel-traverse:用于对AST(抽象语法树,想了解的请自行查询编译原理)的遍历,主要给plugin用 babel-generator:根据AST生成代码

babel的工作原理

babel是一个转译器,感觉相对于编译器compiler,叫转译器transpiler更准确,因为它只是把同种语言的高版本规则翻译成低版本规则,而不像编译器那样,输出的是另一种更低级的语言代码。 但是和编译器类似,babel的转译过程也分为三个阶段:parsing、transforming、generating,以ES6代码转译为ES5代码为例,babel转译的具体过程如下:

首先输入ES6代码 通过babylon进行解析,成为AST抽象树 然后内部插件通过babel-traverse对AST抽象树遍历转译,得到新的抽象树 最后通过babel-generator将AST抽象树生成ES5代码

一个H5的页面通过浏览器怎么渲染的?

首先搞个真实dom树,再去渲染css树 两者结合生成一个render tree(渲染树) 画点:通过指明坐标调用每个坐标的paint 最后重绘(repaint)
最新回复(0)