瞭解JavaScript引擎

JavaScript 是一門高級語言，可是最終計算機能理解只有1和0。 那麼咱們編寫的代碼是如何被計算機理解的呢？ 掌握所學編程語言的基礎知識將讓您能編寫出更好的代碼。 在本文中，咱們僅探討一個問題：JavaScript 是如何工做的。

前言

最初，JavaScript 只能在 Web 瀏覽器中運行，可是隨着 Node 的出現，如今 JavaScript 也能夠在服務端運行。雖然咱們可能知道應該在什麼時候何地去使用它， 可是咱們真的瞭解這些腳本執行的背後發生了什麼嗎？

若是您以爲本身對 JavaScript 引擎有了一些瞭解的話，能夠先給本身鼓個掌，但不要急着關掉本文，我相信閱讀完成後您仍然能夠從中學到一些東西。

JavaScript 是一門高級語言，可是最終計算機能理解只有1和0。 那麼咱們編寫的代碼是如何被計算機理解的呢？ 掌握所學編程語言的基礎知識將讓您能編寫出更好的代碼。 在本文中，咱們僅探討一個問題：JavaScript 是如何工做的？

下面讓咱們進入正題~

JavaScript 引擎

這是本文將要探索的主要內容，它負責使計算機理解咱們編寫的 JS 代碼。JavaScript 引擎是一種用於將咱們的代碼轉換爲機器可讀語言的引擎。若是沒有 JavaScript 引擎，您編寫的代碼對計算機來講簡直是一堆「胡言亂語」。不只僅是 JavaScript ，其餘全部編程語言都須要一個相似的引擎，來將這些「胡言亂語」轉換成對計算機有意義的語言。

目前有多種 JavaScript 引擎在可供使用。您能夠在 Wikipedia 上查閱全部可用的 JavaScript 引擎。它們也被稱爲 ECMAScript 引擎，這樣叫的具體緣由會在下文中說起。 下面是一些咱們平常可能會用到的 JavaScript 引擎：

1. Chakra, Microsoft IE/Edge
   SpiderMonkey, FireFox
   V8, Chrome

除此以外的其它引擎，能夠自行搜索瞭解。接下來，咱們將深刻研究這些引擎，以瞭解它們是如何翻譯 JavaScript 文件的。

JavaScript 引擎的內裏

咱們已經知道了引擎是必須的，由此可能不由會想：

是誰發明了 JavaScript 引擎？

答案是，任何人均可以。它只是分析咱們的代碼並將其翻譯的另外一種語言的工具。V8 是最受歡迎的 JavaScript 引擎之一，也是 Chrome 和 NodeJS 使用的引擎。它是用 C++（一種底層語言）編寫的。可是若是每一個人都創造一個引擎，那場面就不是可控範圍內的了。

所以，爲了給這些引擎確立一個規範，ECMA 的標準誕生了，該標準主要提供如何編寫引擎和 JavaScript 全部功能的規範。這就是新功能能在 ECMAScript 六、七、8 上實現的緣由。同時，引擎也進行了更新以支持這些新功能。 因而，咱們即可以在開發過程當中檢查了瀏覽器中 JS 高級功能的可用性。

下面咱們對 V8 引擎進行進一步的探索，由於基本概念在全部引擎中是一致的。

上圖就是 JS Engine 內部的工做流程。咱們輸入的代碼將經過如下階段：

1. Parser
   AST
   Interpreter 生成 ByteCode
   Profiler
   Compiler 生成優化後的代碼

別被上面的流程給唬住了，在幾分鐘後您將瞭解它們是協同運做的。

在進一步深刻這些階段以前，您須要先了解 Interpreter 和 Compiler 的區別。

Interpreter VS Compiler

一般，將代碼轉換成機器可讀語言的方法有兩種。 咱們將要討論的概念不只適用於 JavaScript ，並且適用於大多數編程語言，例如 Python，Java 等。

1. Interpreter 逐行讀取代碼並當即執行。
   Compiler 讀取您的整個代碼，進行一些優化，而後生成優化後的代碼。

讓咱們來看下面這個例子。

function add(a, b) {  
 return a+b  
}  
for(let i = 0; i < 1000; i++) {  
 add(1 + 1)  
}

上面的示例循環調用了 add 函數1000次，該函數將兩個數字相加並返回總和。

1. 一、Interpreter 接收上面的代碼後，它將逐行讀取並當即執行代碼，直到循環結束。 它的工做僅僅是實時地將代碼轉換爲咱們的計算機能夠理解的內容。
   二、若是這段代碼接受者是 Compiler，它會先完整地讀取整個程序，對咱們要執行的代碼進行分析，並生成電腦能夠讀懂的機器語言。過程如同獲取 X（咱們的JS文件）並生成 Y（機器語言）同樣。若是咱們使用 Interpreter 執行 Y，則會得到與執行 X 相同的結果。

從上圖中能夠看出，ByteCode 只是中間碼，計算機仍須要對其進行翻譯才能執行。 可是 Interpreter 和 Compiler 都將源代碼轉換爲機器語言，它們惟一的區別在於轉換的過程不盡相同。

1. Interpreter 逐行將源代碼轉換爲等效的機器代碼。
   Compiler 在一開始就將全部源代碼轉換爲機器代碼。

當您閱讀完上面的推薦文章後，您可能已經瞭解到 Babel 其實是一個 JS Compiler ，它能夠接收您編寫的新版本 JS 代碼並向下編譯爲與瀏覽器兼容的 JS 代碼（舊版本的 JS 代碼）。

Interpreter 和 Compiler 的優缺點

1. 一、Interpreter 的優勢是無需等待編譯便可當即執行代碼。這對在瀏覽器中運行 JS 提供了極大的便利，由於全部用戶都不想浪費時間在等待代碼編譯這件事上。可是，當有大量的 JS 代碼須要執行時會運行地比較慢。還記得上面例子中的那一小段代碼嗎？代碼中執行了1000次函數調用。函數 add 被調用了1000次，但他的輸出保持不變。可是 Interpreter 仍是逐行執行，會顯得比較慢。
   二、在一樣的狀況下，Compiler 能夠經過用2代替循環（由於 add 函數每次都是執行1 + 1）來進行一些優化。Compiler 最終給出的優化代碼能夠在更短的時間內執行完成。
   綜上所述，Interpreter 能夠當即開始執行代碼，但不會進行優化。 Compiler 雖然須要花費一些時間來編譯代碼，可是會生成對執行時更優的代碼。

好的，Interpreter 和 Compiler 必要知識咱們已經瞭解了。如今讓咱們回到主題——JS 引擎。

所以，考慮到編譯器和解釋器的優缺點，若是咱們同時利用二者的優勢，該怎麼辦？ 這就是 JIT(Just In Time) Compiler 的用武之地。它是 Interpreter 和 Compiler 的結合，如今大多數瀏覽器都在更快，更高效地實現此功能。同時 V8 引擎也使用此功能。

在這個過程當中，

1. 一、Parser 是一種經過各類 JavaScript 關鍵字來識別，分析和分類程序各個部分的解析器。它能夠區分代碼是一個方法仍是一個變量。
   二、而後，AST(抽象語法樹) 基於 Parser 的分類構造樹狀結構。您可使用 AST Explorer 查看該樹的結構。
   三、隨後將 AST 提供給 Interpreter 生成 ByteCode。如上文所述，ByteCode 不是最底層的代碼，但能夠被執行。在此階段，瀏覽器藉助 V8 引擎執行 ByteCode 進行工做，所以用戶無需等待。
   四、同時，Profiler 將查找能夠被優化的代碼，而後將它們傳遞給 Compiler。Compiler 生成優化代碼的同時，瀏覽器暫時用 ByteCode 執行操做。而且，一旦 Compiler 生成了優化代碼，優化代碼則將徹底替換掉臨時的 ByteCode。
   五、 經過這種方式，咱們能夠充分利用 Interpreter 和 Compiler 的優勢。Interpreter 執行代碼的同時，Profiler 尋找能夠被優化的代碼，Compiler 則建立優化的代碼。而後，將 ByteCode 碼替換爲優化後的較爲底層的代碼，例如機器代碼。

這僅意味着性能將在逐漸提升，同時不會有阻塞執行的時間。

關於 ByteCode

做爲機器代碼，ByteCode 不能被全部計算機理解及執行。它仍然須要像虛擬機或像 Javascript V8 引擎這樣的中間件才能將其轉換爲機器可讀的語言。 這就是爲何咱們的瀏覽器能夠在上述5個階段中藉助 JavaScript 引擎在 Interpreter 中執行 ByteCode 的緣由。

因此您能夠會有另外一個問題,

JavaScript 是一門解釋型語言嗎?

JavaScript 是但不徹底是一門解釋型語言。Brendan Eich 最初是在 JavaScript 的早期階段建立 JavaScript 引擎 「 SpiderMonkey」 的。該引擎有一個 Interpreter 來告訴瀏覽器該怎麼執行代碼。 可是如今咱們的引擎不只包括了 Interpreter，還有 Compiler。 咱們的代碼不只能夠被轉換成 ByteCode，還能夠被編譯輸出優化後的代碼。 所以，從技術上講，這徹底取決於引擎是如何實現的。

JavaScript 引擎的總體工做原理就是這樣。相信您無需學習 JavaScript 也能夠理解。 固然，您甚至能夠在不知道 JavaScript 如何工做的狀況下編寫代碼。 可是，若是咱們瞭解一些幕後的知識，或許能讓咱們編寫出更好的代碼。

本文地址：https://www.linuxprobe.com/javascript-engine-understand.html