JavaScript是如何工作的：引擎，運行時間以及回調的概述

he_xd 發布于2019-08-22 11:06 / 2961人閱讀

摘要：是如何工作的引擎，運行時以及調用棧的概述原文譯者隨著變得越來越流行，團隊在多個層級都對它進行利用前端，后端，混合應用，嵌入式設備以及更多。這個將會在是如何工作的的第二部分進一步解釋。

How JavaScript works: an overview of the engine, the runtime, and the call stack JavaScript是如何工作的：引擎，運行時以及調用棧的概述

原文：How JavaScript works: an overview of the engine, the runtime, and the call stack

譯者：neal1991

welcome to star my articles-translator , providing you advanced articles translation. Any suggestion, please issue or contact me

LICENSE: MIT

隨著JavaScript變得越來越流行，團隊在多個層級都對它進行利用－前端，后端，混合應用，嵌入式設備以及更多。

正如GitHut stats所展示的那樣，JavaScript是Github上面最活躍以及總Push次數最多的語言。在其它類別中也不會落后太多。

(獲取最新的 GitHub language stats).

如果項目對于JavaScript越來越依賴，這意味著為了構建好的軟件開發者必須利用這個JS提供的一切并且對于生態系統的內部有著更深的理解。

因此，盡管每天有很多開發者在使用JavaScript，但并不知道內部到底發生了什么。

概覽

幾乎每個人都已經聽說過V8引擎的概念，并且很多知道JavaScript是單線程的或者它是使用一個回調隊列的。

在這篇博文中，我們將會詳細講述所有概念并且解釋JavaScript是如何真正運行的。在了解這些細節之后，你將能夠寫出能夠適宜地利用提供的API的更好的，非阻塞的app。

如果對于JvaScript來說還不是很了解，這篇博文將會幫助你理解為什么JavaScript和別的語言相比如此“奇怪”。

如果你是一個有經驗的JavaScript開發者，希望這篇文章能夠讓你對你每天使用的JavaScript Runtime是如何真正工作的。

JavaScript 引擎

最流行的JavaScript引擎的例子之一就是谷歌的V8引擎。比如Chrome以及Node.js內部就是使用V8引擎。下面是一個簡單的視圖示例：

引擎主要由兩個部分組成：

內存堆——這是內存分配發生的地方

回調——這是你代碼執行時的棧幀。

Runtime

有很多瀏覽器中的API幾乎都被JavaScript開發者使用過（比如："setTimeout"）。然而這些API并不是由引擎提供的。

那么，它們是從哪來的呢？

事實證明這有一點復雜。

因此，雖然我們有引擎但實際上是有更多。我們有那些由瀏覽器提供的Web API，像DOM, AJAX, setTimeout以及更多。

接著，我們還有非常流行的事件循環(event loo)以及回調隊列(callback queue)。

調用棧

JavaScript是一種單線程的編程語言，這意味著它只擁有一個多帶帶的調用棧。因此它一次只能做一件事情。

調用棧是一種數據結構記錄著我們正在程序的什么地方。如果我們步入一個函數，我們就將這個函數放在棧的頂部。如果我們從一個函數返回，我們則是將這個函數從棧頂彈出。這就是這個棧所做的一切。

讓我們看一個例子。參看如下代碼：

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

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

printSquare(5);

當引擎執行這段代碼的時候，調用棧首先將會是空的。然后，將會按照以下步驟進行：

調用棧中的每一項都被稱為棧幀(Stack Frame)。

并且這正是都異常被拋出的時候棧追蹤是如何構建的——這基本就是異常發生時調用棧的狀態。請看如下代碼：

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是如何工作的"的第二部分進一步解釋。

同時，如果你很難在你的JavaScript重現并且理解問題的時候，可以看看 SessionStack。SessionStack記錄了你的web應用中的一切：所有的DOM變化，用戶交互，JavaScript異常，棧追蹤，失敗的網絡請求以及調試消息。

使用SessionStack，你可以重現你的web應用中的問題就像錄像一樣，并且可以看到用戶交互的一切。

現在有一個免費的計劃能夠允許你可以開始免費試用

GPU云服務器云服務器在線編輯運行 python 是如何搭建的在工作遇到 ddos 攻擊你是如何解決的更改工作時間的通知 asp的運行環境是

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91787.html

【譯】JavaScript 如何工作：對引擎、運行時、調用堆棧的概述

摘要：調用棧是一種數據結構，它記錄了我們在程序中的位置。當從這個函數返回的時候，就會將這個函數從棧頂彈出，這就是調用棧做的事情。而且這不是唯一的問題，一旦你的瀏覽器開始處理調用棧中的眾多任務，它可能會停止響應相當長一段時間。原文地址: https://blog.sessionstack.com... PS: 好久沒寫東西了，最近一直在準備寫一個自己的博客，最后一些技術方向已經敲定了，又可以...

Warren 2019-08-21 17:35 評論0 收藏0
JavaScript是如何工作的：引擎，運行時和調用堆棧的概述！

摘要：調用棧是一種單線程編程語言，這意味著它只有一個調用堆棧。調用棧是一種數據結構，它記錄了我們在程序中的位置。而且這不是唯一的問題，一旦你的瀏覽器開始處理調用棧中的眾多任務，它可能會停止響應相當長一段時間。本文是旨在深入研究JavaScript及其實際工作原理的系列文章中的第一篇:我們認為通過了解JavaScript的構建塊以及它們是如何工作的，將能夠編寫更好的代碼和應用程序。我們還將分...

PiscesYE 2019-08-23 14:01 評論0 收藏0
JavaScript如何工作：引擎，運行時和調用堆棧的概述

摘要：如果我們進入一個函數，我們在堆棧的頂部。看看下面的代碼當引擎開始執行此代碼時，調用堆棧將為空。之后，步驟如下調用堆棧中的每個條目稱為堆棧幀。這正是拋出異常時構造堆棧跟蹤的方式當異常發生時，它基本上是調用堆棧的狀態。隨著JavaScript越來越受歡迎，團隊正在利用這個技術棧在多個層次- 前端，后端，混合應用程序，嵌入式設備等等提供支持。這篇文章旨在成為系列中第一個旨在深入挖掘Jav...

wwolf 2019-08-22 11:11 評論0 收藏0
JavaScript 工作原理之一－引擎，運行時，調用堆棧(譯)

摘要：本章會對語言引擎，運行時，調用棧做一個概述。調用棧只是一個單線程的編程語言，這意味著它只有一個調用棧。查看如下代碼當引擎開始執行這段代碼的時候，調用棧會被清空。之后，產生如下步驟調用棧中的每個入口被稱為堆棧結構。原文請查閱這里，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原...

Betta 2019-08-22 17:02 評論0 收藏0
JavaScript 工作原理之一－引擎，運行時，調用堆棧(譯)

摘要：本章會對語言引擎，運行時，調用棧做一個概述。調用棧只是一個單線程的編程語言，這意味著它只有一個調用棧。查看如下代碼當引擎開始執行這段代碼的時候，調用棧會被清空。之后，產生如下步驟調用棧中的每個入口被稱為堆棧結構。原文請查閱這里，本文采用知識共享署名 4.0 國際許可協議共享，BY Troland。本系列持續更新中，Github 地址請查閱這里。這是 JavaScript 工作原...

Alex 2019-08-22 17:23 評論0 收藏0