JS引擎->V8, 2021最新執行流程分析

wlove發表於2022-03-15
JS

image.png

  1. 什麼是V8?
  2. V8整體執行流程
  3. V8流程細節分析

什麼是V8?

V8 是 Google 的開源高效能 JavaScript 和 WebAssembly 引擎，用 C++ 編寫。它用於 Chrome 和 Node.js 等。它實現了ECMAScript和WebAssembly，並在 Windows 7 或更高版本、macOS 10.12+ 以及使用 x64、IA-32、ARM 或 MIPS 處理器的 Linux 系統上執行。V8 可以獨立執行，也可以嵌入到任何 C++ 應用程式中。

V8整體執行流程

image.png

名詞解釋:

  1. source code: Javascript
  2. Parser 處理為AST的Parser(解析器)
  3. AST 抽象語法樹
  4. Ignition 直譯器 將AST轉換為byteCode
  5. Sparkplug 無優化編譯器 可以理解為將byteCode預編譯(非常的快速)
  6. byteCode execute 位元組碼 可以理解為跨平臺的一種編碼(非平臺機器碼)
  7. Turbofan 優化編譯器 對於byteCode進行編譯並對於程式碼進行優化
  8. Machine Code 機器碼 各平臺執行的程式碼

V8 流程細節分析

Source Code

就是指Javascript原始碼 至於你開發中使用的是TypeScript,在進入瀏覽器之前也是需要編譯成Js的 可以理解為V8只識別JS。
下邊拿一個函式進行分析:
function add(x,y){   // <- top level code  解析環節。
    return x + y;    // <- non top level
}

parser

parser部分,瞭解過編譯的同學都知道有詞法分析,語法分析...

image.png

image.png

AST

AST是指原始碼的抽象語法結構的樹狀表現形式.
image.png

Ignition ==> byteCode

Parser過後就是生成位元組碼 這個是V8內部的類BytecodeGenerator進行生成的。
image.png

Turbofan

image.png
Turbofan是根據位元組碼和熱點函式反饋型別生成優化後的機器碼，Turbofan很多優化過程，基本和編譯原理的後端優化差不多，採用的sea-of-node。

Sparkplug

Sparkplug 旨在快速編譯。 非常快。 速度如此之快，幾乎可以隨時編譯，所以能夠比 TurboFan 程式碼更積極地對 Sparkplug 程式碼進行分層。
image.png
  1. Sparkplug所編譯的是byteCode
  2. Sparkplug編譯不做優化
  3. Sparkplug只需要與解析器Ignition行為映象 不需要某種狀態的對映
  4. ...

最後

倆件事:

  1. 視覺化相關的架構設計,原始碼學習，日常開發。我會逐步進行深入分享。如果對你有幫助請關注我後續的內容。有需要的同學可以加一下我的聯絡方式(在我的主頁,拉你進群聊)。

  2. javascript相關內容進階聯絡我主頁微信,嗯就這樣。 bye~

    哦對, 還有一件事 祝各位女神,女神節快樂。 BYE~

相關文章