JavaScript 工做原理之一－引擎，運行時，調用堆棧(譯)

引擎，運行時，調用堆棧

原文請查閱這裏

本系列持續更新中，Github 地址請查閱這裏。

這是 JavaScript 工做原理的第一章。本章會對語言引擎，運行時，調用棧作一個概述。

隨着 JavaScript 愈來愈流行，團隊也利用其在他們諸如前端，後端，混合 apps，嵌入設備以及更多設備等開發棧中的不一樣層面的支持。

本章系列的第一章，本系列旨在深刻 JavaScript 並理解它是如何運行的：咱們認爲在瞭解 JavaScript 的構建模塊和它們是如何捏合在一塊兒工做以後你將會寫出更好的代碼和 apps。咱們將會分享一些當在建立 SessionStack 時候的經驗法則，SessionStack 是一個輕量級的 JavaScript 程序它擁有強壯性和高性能的優勢以保持競爭力。

正如 GitHut stats 所顯示的那樣，JavaScript 的活躍庫和總推送數在 Github 排名第一。其它方面的表現也不會比其它語言落下太多。

(點擊查看最新 Github 語言統計)

若是工程很是依賴於 JavaScript，那麼這意味着開發者不得不使用 JavaScript 和其語言生態提供的一切事物，爲了可以創造出很酷的軟件，就得更加深刻地瞭解 JavaScript 語言的內部工做機制。

事實上，有不少開發者在天天平常開發中都會使用 JavaScript 可是卻不瞭解其底層的知識。

概述

幾乎全部人都已經據說過 V8 引擎的概念，而且不少人知道 JavaScript 是單線程的或者說是使用回調隊列的。

在本章中，我將會詳細地過一下這些概念並解釋 JavaScript 的工做原理。有賴於瞭解這些細節，經過合理地使用提供的 APIs 你將可能寫出更好的，非阻塞的程序。

若是你是新手，本文將會幫助你理解爲何和其它語言比較 JavaScript 是難以想象的。

若是你是一個經驗豐富的 JavaScript 開發者，希望，它將會讓你更加深刻地瞭解 JavaScript 運行時工做原理。

JavaScript 引擎

谷歌 V8 引擎是流行的 JavaScript 引擎之一。V8 引擎在諸如 Chrome 和 Node.js 內部使用。這裏有一個簡單的視圖來描繪其大概。

引擎包括兩個主要組件：

• 動態內存管理 － 在這裏分配內存
• 調用棧－這裏代碼執行便是你的堆棧結構

運行時

幾乎每一個 JavaScript 開發者都使用過一些瀏覽器 API(好比 setTimeout)。然而這些 API並非引擎所提供的。

那麼它們從何而來？

事實上這個狀況有點複雜呃。。

因此，除了引擎可是實際上還有更多其它方面的東西。有被稱爲 Web API 的東西，這些 Web API 是由瀏覽器提供的，好比 DOM,AJAX,setTimeout 以及其它。

因而乎，就有了流行的事件循環和回調隊列。

調用棧

JavaScript 只是一個單線程的編程語言，這意味着它只有一個調用棧。這樣它只能一次作一件事情。

調用棧是一種數據結構，裏面會記錄咱們在程序中的大概位置。當執行進入一個函數，把它置於棧的頂部。若是從函數中返回則從棧頂部移除函數。這就是調用棧所可以作的事情。

舉個栗子。查看以下代碼：

function multiply(x, y) {
  return x * y;
}

function printSquare(x) {
  var s = multiply(x, x);
  console.log(s);
}

printSquare(5);
複製代碼

當引擎開始執行這段代碼的時候，調用棧會被清空。以後，產生以下步驟：

調用棧中的每一個入口被稱爲堆棧結構。

當拋出異常的時候這正好是堆棧追蹤是如何被構造出來的－當發生異常的時候這基本上是調用棧的狀態。看下以下代碼：

function foo() {
  throw new Error('SessionStack will help you resolve crashes:)');
}

function bar() {
  foo();
}

function start() {
  bar();
}

start();
複製代碼

若是在 Chrome 中執行（假設代碼在 foo.js 的文件中），將會產生以下的堆棧追蹤：

"堆棧溢出"－當你達到最大調用棧大小的時候發生。這種狀況至關容易發生，特別是當你使用遞歸而沒有仔細地檢查代碼的時候。查看下以下代碼：

function foo() {
  foo();
}

foo();
複製代碼

當引擎開始執行這段代碼的時候，它開始調用 foo 函數。這個函數，然而，會遞歸併開始調用其自身而沒有任何結束條件。因此在每步執行過程當中，調用堆棧會反覆地添加一樣的函數。執行過程以下所示：

在某一時刻，然而，調用堆棧中的函數調用次數超過了調用堆棧的實際大小，這樣瀏覽器決定拋出錯誤的動做，以下所示：

在單線程中運行代碼會至關輕鬆由於你不用處理多線程環境中產生的一些複雜狀況，好比死鎖。

可是在單線程運行代碼也會有至關的限制。因爲 JavaScript 只有一個調用棧，若是運行很慢會發生什麼？

併發和事件循環

當你在調用棧中有函數爲了完成運行須要消耗大量的時間的時候會發生什麼？例如，想象一下你想要在瀏覽器用 JavaScript 來執行一些複雜的圖像轉化。

你或許會問－爲何這也是個問題？問題是這樣的當調用棧有函數須要執行，瀏覽器實際上不能作其它任何事－它被阻塞了。這意味着瀏覽器不可以執行渲染，它不可以運行其它代碼，它卡住了。若是你想要在 app 中擁有酷炫的流暢 UI 體驗，這將會是個問題。

這不會是惟一的問題。一旦瀏覽器開始在調用棧中執行如此多的任務，瀏覽器將會在至關一段時間內中止交互。大多數瀏覽器會拋出一個錯誤，詢問你是否關閉網頁。

如今，這並非最好的用戶體驗，難道不是嗎？

所以，如何不阻塞 UI 且不讓瀏覽器中止響應來執行運行緩慢的代碼呢？使用異步回調。

這將會在 『JavaScript 工做原理』 第二章：『在V8 引擎中如何寫最佳代碼的 5 條小技巧』中進行詳細闡述。

打個廣告 ^.^

今日頭條招人啦！發送簡歷到 likun.liyuk@bytedance.com，便可走快速內推通道，長期有效！國際化PGC部門的JD以下：c.xiumi.us/board/v5/2H…，也可內推其餘部門！

本系列持續更新中，Github 地址請查閱這裏。