1. 程式人生 > 程式設計 >帶你瞭解JavaScript的執行原理

帶你瞭解JavaScript的執行原理

目錄
  • 瀏覽器核心
  • 引擎
  • V8 引擎

瞭解Script 是如何執行的,以及的它的執行機制,首先,我們要了解瀏覽器的核心:

瀏覽器核心

瞭解過的都知道:不同的瀏覽器是由不同的核心組成,那麼有哪些核心以及我們常用的瀏覽器都使用了那些核心:

  • Gecko:早期被Netscape和Mozilla Firefox瀏覽器瀏覽器使用;
  • Trident:微軟開發,被IE4~IE11瀏覽器使用,但是Edge瀏覽器已經轉向Blink;
  • Webkit:蘋果基於KHTML開發、開源的,用於Safari,Google Chrome之前也在使用;
  • Blink:是Webkit的一個分支,Google開發,目前應用於Google Chrome、Edge、Opera等;

所謂瀏覽器核心,指的是瀏覽器的排版引擎,即瀏覽器引擎。引擎的工作執行流程如下:

在這裡插入圖片描述

但是在這個執行過程中,HTML解析的時候遇到了JavaScript標籤,應該怎麼辦呢?
會停止解析HTML,而去載入和執行JavaScript程式碼;

當然,為什麼不直接非同步去載入執行JavaScript程式碼,而要在這裡停止掉呢?

所以瀏覽器希望將HTML解析的DOM和JavaScript操作之後的DOM放到一起來生成最終的DOM樹,而不是頻繁的去生成新的DOM樹;

那麼,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 是一個強大的JavaScript 引擎)

V8 引擎

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

V8 引擎執行JavaScript 程式碼的原理:

Parse模組會http://www.cppcns.com將JavaScript程式碼轉換成AST(抽象語法樹),這是因為直譯器並不直接認識- JavaScript程式碼;

  • 如果函式沒有被呼叫,那麼是不會被轉換成AST的;
  • Parse的V8官方文件:https://v8.dev/blog/scanner

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/turbofhttp://www.cppcns.coman-jit

上面是JavaScript程式碼的執行過程

學習,記錄,共勉!

到此這篇關於帶你瞭解JavaScript的執行原理的文章就介紹到這了,更多相關JavaScript執行原理內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!