浏览器

浏览器渲染过程

  1. HTML=>DOM树,CSS=>CSS规则树
  2. DOM树+CSS规则树=>渲染树
  3. 渲染树再次经过布局
  4. 渲染至浏览器中展示

浏览器内核和JS引擎

浏览器内核和JS引擎的关系

浏览器内核包括渲染内核和JS引擎

以WebKit(苹果浏览器内核)为例

WebKit:

  • WebCore:负责HTML解析、布局、渲染等相关操作
  • JavaScriptCore:解析、执行JavaScript代码

V8引擎

V8引擎是用C++编写的Google开源高性能JavaScript引擎，用于Chrome和Node

V8引擎原理图

JavaScript(源代码) => Parse(解析) => AST(抽象语法树) =>

正常

Ignition(解释) => ByteCode(字节码 => 运行

优化

TurboFan(优化编译) => MachineCode(优化的机器码) => 运行

  • Parse(解析):词法分析、语法分析
    AST explorer

  • Ignition(解释):将JS编码解释为字节码（而非机器码） V8引擎引入字节码的原因

众所周知电脑执行指令需要机器码。但V8引擎却将其解析为高级语言和机器语言的中间态——汇编语言（字节码）

这必然会造成性能的降低，但如今这种JS引擎解释方式也是主流。

  • 字节码占用的内存空间更少，即牺牲时间换空间
  • 解释为字节码所需时间更少，提高代码启动速度
  • TurboFan(优化编译):将对热点函数直接解释为机器码，使JS执行更快

01.浏览器工作原理 - 图1

V8引擎预解析

V8引擎在解析时，一些暂时不需要使用的函数仅会进行预解析，而不会解析函数内容，加快解析速度。

例如：函数内部函数定义却没有调用