概覽

幾乎所有人都已經聽說了V8引擎的概念，大多數人都知道JavaScript是單線程運行的或者說是使用回調隊列的。

接下來，我們將詳細的講述這些概念，解釋JavaScript到底是怎樣運行的。當知道了這些細節后，你就能合理利用已有的API寫出更好的，非阻塞的應用。 如果你是JavaScript新手，這篇博客可以幫助你理解為什么相對于其他語言，JavaScript顯得如此奇怪。

如果你是比較有經驗的JavaScript開發者，希望這篇博客可以讓你對你每天使用的JavaScript運行時到底是怎樣運行的有一些新的見解。

JavaScript引擎

一個流行的JavaScript引擎是谷歌的V8引擎。例如在Chrome和Node.js中使用的就是V8引擎。下圖是V8引擎一個非常簡單的預覽：

V8引擎由兩個主要組件所組成：

• Memory Heap--內存分配區

• Call Stack--代碼運行時棧

運行時

大部分JavaScript開發者都使用過瀏覽器的API（例如“setTimeout”）。然而這些API都不是由引擎提供的。 那么，它們來自哪里呢？ 真實情況有點復雜。

所以除了引擎還有喝很多其他的東西。有瀏覽器提供的Web API，像DOM，AJAX，setTimeout等等。 然后還有非常有名的event loop和call queue。

調用棧

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”函數，但是這個函數是遞歸的，開始調用自己并且沒有結束條件。所以每一步執行，相同的函數都會一遍又一遍的加入到調用棧中，看上去就像這樣：

然而在某個時間點上調用棧中的函數調用數量將會超過調用棧的實際大小，此時瀏覽器決定采取行動，拋出一個錯誤，我們就會看到像下面這樣的提示：

在單線程上運行代碼是非常容易的，你不用處理在多線程中發生的復雜的場景--例如死鎖。

Concurrency & the Event Loop

在調用棧中存在需要花費很多時間的函數調用時會發生什么呢？例如，想象一下你需要在瀏覽器中利用JavaScript來做一些復雜的圖片轉換。

你可能會問--這有什么好問的？問題就是調用棧在執行函數的時候，瀏覽器不能做其他的事--瀏覽器被阻塞了。這意味著瀏覽器將不能渲染，不能運行其他代碼，就是說被阻塞了。如果你想要一個體驗很好，運行流暢的應用，這將會是很大的問題。

而且還不止這一個問題。一旦你的瀏覽器在調用棧中處理很多任務，它將會在很長時間內得不到響應，大多數瀏覽器將會拋出一個錯誤來采取行動，詢問你是否要結束這個web頁面。

這不是最好的用戶體驗，不是嗎？

所以，我們怎樣才能在運行很重的代碼的時候，不阻塞UI，使瀏覽器不需要等待響應呢？解決方案就是異步回調。

我們將會在下一節詳細講述。

對V8引擎的內部機制感興趣的同學可以看這里。

本文翻譯自：blog.sessionstack.com/how-does-ja…

總結

以上是生活随笔為你收集整理的JS引擎、运行时与调用栈概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。