关于浏览器:浏览器工作原理及V8引擎

当浏览器加载 html 资源时，会进行如下的解析过程

遇见 HTML 标记，构建 DOM 树
遇见 style/link 标记调用相应解析器解决 CSS 标记，并构建出 CSS 款式树
遇见 script 标记调用 javascript 引擎解决 script 标记、绑定事件、批改 DOM 树 /CSS 树等
将 DOM 树与 CSS 树合并成一个渲染树
依据渲染树来渲染，以计算每个节点的几何信息
最终将各个节点绘制到屏幕上

用一张十分经典的图来示意

浏览器引擎分为两局部，渲染引擎和 js 引擎。

渲染引擎用于解析、解决 html、css 文件、布局绘制
JavaScript 引擎用于解析 js 文件，常见的 JavaScript 引擎有 JavascriptCore、V8

咱们晓得，javascript 是一门高级语言，它须要通过编译能力被计算机辨认，那么编译的这个过程就由 V8 引擎来实现

V8 解决 JS 文件通过以下几个步骤

1、Parser 模块拥护 Javascript 代码进行词法剖析，解析成 AST(形象语法树)
AST 的生成如下图所示，定义一个名为 name 的常量，解析成左边的树结构

这样所有的代码的构造都十分对立，便于解决

2、Ignition 将 AST 解析成 bytecode(字节码)，最初依据不同的操作系统 / 环境编译成计算机可辨认的机器码
比方 windows/macos，cpu 架构不统一所能执行的机器指令是不一样的，字节码能够跨平台，等到执行的时候，V8 引擎再将字节码解析成机器码

3、Ignition 收集优化信息，通过 Turbofan 将 bytecode 编译成机器码
如果一个函数会被屡次执行，AST–>bytecode–> 机器码这样的过程比拟节约性能，为了进行优化，会标记此函数为热点函数，此时 Ignition 会收集优化信息，如函数的参数，这样间接通过 Turbofan 将字节码编译成机器码。
如果优化信息产生的变动，比方函数入参的类型始终是 number，忽然变成了 string，这时候 Turbofan 会将机器码反向的编译成字节码，再同 Iginition 解析成机器码执行。

图示如下

Parser 模块解析成 AST 的过程中还通过了以下步骤

Blink(Chrome 浏览器内核)将源码交给 V8 引擎，Stream 进行编码转换
Scanner 进行词法剖析后，将代码转成 token
PreParser(预解析)，如果函数没有调用则不会被解析
Parser 模块解析成 AST
Ignition、Toburfan 再解析

图示如下

浏览器解析过程

浏览器引擎

V8 引擎

Parser 模块