浏览器运行原理

认识浏览器工作原理

先考虑一个常见的问题：页面输入 url 到页面渲染，发生了什么？

  • 比如我输入一个 baidu.com 然后敲下回车
  • 浏览器会通过 DNS 服务器，将 url 解析为 IP 地址
  • 会通过 IP 地址，找到相应的服务器，建立 TCP 连接，（就是三次握手），向服务器发送 http 请求
  • 服务器接收请求，返回 http 报文、浏览器接收后，得到 html 代码
  • 浏览器解析 html 代码，并请求 html 代码中的资源 （比如遇到 link 标签，浏览器就会去服务器上下载对应的 css 文件，遇到 script 标签就会去服务器上下载对应的 js 文件）
  • 渲染页面给用户
  • 服务器断开 TCP 连接 （四次挥手）

而其中 浏览器解析 html 代码 就是通过浏览器内核来进行解析的

浏览器解析 html 代码的过程

图解：

浏览器解析html代码的过程.png

浏览器的内核

浏览器内核指的是浏览器的排版引擎

排版引擎（layout engine），也称为浏览器引擎（browser engine）、页面渲染引擎（rendering engine）
或样版引擎。

不同的浏览器有不同的内核：

  • Gecko：早期被 Netscape 和 Mozilla Firefox 浏览器浏览器使用
  • pTrident：微软开发，被IE4~IE11浏览器使用，但是 Edge 浏览器已经转向 Blink
  • pWebkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用
  • pBlink：是Webkit的一个分支，Google 开发，目前应用于 Google Chrome、Edge、Opera 等

浏览器渲染过程

图解：

浏览器渲染过程.png

分析：

  1. 首先 HTML（很多很多的标签）， 把很多的标签转换成对应的 HTML Parser , 然后形成 DOM 树
  2. style 样式标签会转换成 CSS Parse 然后形成 style 规则
  3. 之后，DOM 树和 style 规则 会结合一起形成 Render Tree 渲染树，
    1. 这时会有 layout （布局）， 作用就是： 当浏览器发生变化时会展示不同的效果
  4. 最后生成 Render Tree 渲染树会进行绘制，将其展示在浏览器上

疑问：

Q1: JavaScript 代码在哪里执行呢？

A1: 在形成 DOM 树时， 有时候我们会对 DOM 进行操作，这时候就会遇到 JavaScript 代码

Q2: 谁来执行 JavaScript 代码？

A2: 因为 CPU 不认识 JavaScript ，所以是用过 JavaScript 引擎来执行的

认识 JavaScript 引擎

为什么需要 JavaScript 引擎

  • 高级的编程语言都是需要转成最终的机器指令来执行的；
  • 事实上我们编写的 JavaScript 无论你交给浏览器或者 Node 执行，最后都是需要被 CPU 执行的；
  • 但是 CPU 只认识自己的指令集，实际上是机器语言，才能被 CPU 所执行；
  • 所以我们需要 JavaScript 引擎帮助我们将 JavaScript 代码翻译成 CPU 指令来执行；

常见的 JavaScript 引擎

  • SpiderMonkey：第一款 JavaScript 引擎，由 Brendan Eich 开发（也就是 JavaScript 作者）；
  • Chakra：微软开发，用于 IE 浏览器；
  • JavaScriptCore：WebKit 中的 JavaScript 引擎，Apple 公司开发；
  • V8：Google 开发的强大 JavaScript 引擎，也帮助 Chrome 从众多浏览器中脱颖而出；

V8 引擎

我们来看一下官方对 V8 引擎的定义：

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

V8 引擎架构

V8 引擎本身的源码非常复杂，大概有超过 100w 行 C++代码，通过了解它的架构，我们可以知道它是如何对 JavaScript 执行的：

Parse模块会将 JavaScript 代码转换成 AST（抽象语法树），这是因为解释器并不直接认识 JavaScript 代码；

Ignition 是一个解释器，会将 AST 转换成 ByteCode（字节码）

  • 同时会收集 TurboFan 优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
  • 如果函数只调用一次，Ignition 会执行解释执行 ByteCode；
  • Ignition 的 V8 官方文档：https://v8.dev/blog/ignition-interpreter

TurboFan 是一个编译器，可以将字节码编译为 CPU 可以直接执行的机器码；

  • 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过 TurboFan 转换成优化的机器码，提高代码的执行性能；
  • 但是，机器码实际上也会被还原为 ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如 sum 函数原来执行的是 number 类型，后来执行变成了 string 类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码(反向优化)；
  • TurboFan 的 V8 官方文档：https://v8.dev/blog/turbofan-jit

V8 执行细节

那么我们的 JavaScript 源码是如何被解析（Parse 过程）的呢？

Blink 将源码交给 V8 引擎，Stream 获取到源码并且进行编码转换；

Scanner 会进行词法分析（lexical analysis），词法分析会将代码转换成 tokens；

接下来 tokens 会被转换成 AST 树，经过 Parser 和 PreParser：

  • Parser 就是直接将 tokens 转成 AST 树架构；
  • PreParser 称之为预解析，为什么需要预解析呢？
    • 这是因为并不是所有的 JavaScript 代码，在一开始时就会被执行。那么对所有的 JavaScript 代码进行解析，必然会 影响网页的运行效率；
    • 所以 V8 引擎就实现了 Lazy Parsing（延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析暂时需要的内容，而对函数的全量解析是在函数被调用时才会进行；
    • 比如我们在一个函数 outer 内部定义了另外一个函数 inner，那么 inner 函数就会进行预解析；
  • 生成 AST 树后，会被 Ignition 转成字节码（bytecode），之后的过程就是代码的执行过程（后续会详细分析）。