帶你了解JavaScript的運作原理

本篇文章為大家帶來了關於javascript的相關知識，主要介紹了關於JavaScript的運作原理，本文為大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鏡價值，需要的朋友可以參考下。

【相關推薦：javascript影片教學、web前端】

了解JavaScript 是如何運作的，以及的它的運作機制，首先，我們要了解瀏覽器的核心：

瀏覽器核心

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

• 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.js等。
• 它實作ECMAScript和WebAssembly，並在Windows 7或更高版本，macOS 10.12 和使用x64，IA-32，ARM或MIPS處理器的Linux系統上運作。
• V8可以獨立運行，也可以嵌入到任何C 應用程式中。

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

Parse模組會將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/turbofan-jit

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

【相關推薦：javascript影片教學、web前端】

以上是帶你了解JavaScript的運作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！