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

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）