浏览器原理

常见的浏览器

目前，我们常见的浏览器主要有：

• IE浏览器
• Safari浏览器
• Firefox浏览器
• Opera浏览器
• Chrome浏览器

其中，程序员开发使用时主要使用的是Chrome浏览器。因为它具有强大的模拟功能和检查功能，可以帮助程序员进行更高效地开发。

浏览器的组成

常见的浏览器一般由七个模块组成，User Interface（用户界面）、Browser engine（浏览器引擎）、Rendering engine（渲染引擎）、Networking（网络）、JavaScript Interpreter（js解释器）、UI Backend（UI 后端）、Date Persistence（数据持久化存储）

浏览器的引擎可以帮助我们将编程时的高级语言转化成计算机可以执行的机器语言（如：JS解析器），并且将页面渲染加载出来（渲染引擎）。

Chrome浏览器的内核及引擎

• Chrome浏览器的内核： 最早使用Webkit内核，后来基于Webkit内核开发出Blink内核。

• Chrome浏览器的引擎： 采用大名鼎鼎的V8引擎。

Blink内核解析原理

Blink内核帮助我们解析HTML以及CSS文件，将我们的代码以页面的形式展现出来（渲染引擎）。

• 解析HTML，生成DOM树，解析CSS，生成CSSOM树
• 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
• Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
• Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
• Display:将像素发送给GPU，展示在页面上

其中，DOM Tree上面的DOM是指JS指令操作页面的DOM元素，此时JS命令会阻塞HTML的加载。

V8引擎原理

V8引擎帮助我们将编程时的高级语言转化成计算机可以执行的机器语言（如：JS解析器）。

• JS源代码：我们在开发过程中书写的JS代码。
• Parse模块：将JavaScript代码转换成AST（抽象语法树）。
• AST（抽象语法树）：将我们的JS语句转化为对象的格式，有一点类似于虚拟DOM树。
• Ignition模块：一个解释器，可以将AST转换成ByteCode（字节码）。
• ByteCode（字节码）：由0和1组成的二进制文件，也就是计算机可以识别的机器语言。
• TurboFan模块：一个编译器，可以将字节码编译为CPU认识的机器码。