首先来放个流程图镇楼，总结的青训营客户端ppt的内容（仅代表个人理解，如有错误理解请评论纠正）

浏览器渲染流程

HTML解析过程因为默认情况下服务器会给浏览器返回index.html文件，所以解析HTML是所有步骤的开始：解析HTML，会构建DOM Tree：
生成CSS规则在解析的过程中，如果遇到CSS的link元素，那么会由浏览器负责下载对应的CSS文件：注意：下载CSS文件是不会影响DOM的解析的；浏览器下载完CSS文件后，就会对CSS文件进行解析，解析出对应的规则树：我们可以称之为 CSSOM（CSS Object Model，CSS对象模型）；
构建 render tree 当有了DOM Tree和 CSSOM Tree后，就可以两个结合来构建Render Tree了
布局（layout）和绘制（Paint）
- 第四步是在渲染树（Render Tree）上运行布局（Layout）以计算每个节点的几何体。渲染树会表示显示哪些节点以及其他样式，但是不表示每个节点的尺寸、位置等信息；布局是确定呈现树中所有节点的宽度、高度和位置信息；
- 第五步是将每个节点绘制（Paint）到屏幕上在绘制阶段，浏览器将布局阶段计算的每个frame转为屏幕上实际的像素点；包括将元素的可见部分进行绘制，比如文本、颜色、边框、阴影、替换元素（比如img）

JavaScript的运行原理

浏览器内核是由两部分组成的，以webkit为例：

官方对V8引擎的定义

V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行。
V8可以独立运行，也可以嵌入到任何C ++应用程序中。

Parse模块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识JavaScript代码； - 如果函数没有被调用，那么是不会被转换成AST的； - Parse的V8官方文档：v8.dev/blog/scanne…

Ignition是一个解释器，会将AST转换成ByteCode（字节码）
- 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
- 如果函数只调用一次，Ignition会解释执行ByteCode；
- Ignition的V8官方文档：v8.dev/blog/igniti…
TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码；
- 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；
- 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码；
- TurboFan的V8官方文档：v8.dev/blog/turbof…

词法分析（英文lexical analysis）

将字符序列转换成token序列的过程。
token是记号化（tokenization）的缩写
词法分析器（lexical analyzer，简称lexer），也叫扫描器（scanner） var name = "gsy" ; 就是把每个词转为token，进行分词

语法分析（英语：syntactic analysis，也叫 parsing）语法分析器也可以称之为parser。