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

跟着 JavaScript 愈来愈盛行，开辟团队也更多地运用其来支撑手艺栈的各方面，前端、后端、夹杂运用、嵌入式装备等。

本文是旨在深切发掘 JavaScript 其事变道理系列教程的首篇：我们以为经由历程相识 JavaScript 的构建单位并熟习它们是怎样结合起来的，有助于你写出更好的代码和运用。我们也会分享一些在构建 SessionStack 运用时用到的履历轨则，为了保持其竞争力它是一个硬朗、高性能的轻量级 JavaScript 运用。

如GitHut stats所示，JavaScript 在活泼客栈数和GitHub总推送数方面位于首位。在其他种别排名中落伍的也不多。

（检察最新的统计）。

假如项目变得云云依靠 JavaScript ，这就意味着开辟者必需越发深切地明白其内部道理以充分运用言语和其生态供应的一切内容，从而构建更棒的软件。

现实显现，很多开辟者天天都在运用 JavaScript 却不知其底层发作了什么。

概述

险些每个人都听说过 V8 引擎的观点，大多数人也晓得 JavaScript 是单线程的或许运用回调行列。

在本文中，我们会细致解说这些观点并论述 JavaScript 是怎样运转的。经由历程相识这些细节，你就能够运用供应的 APIs 写出更好的、无壅塞的运用。

假如你对 JavaScript 相对生疏，这个博客能够协助你明白为什么与其他言语比拟 JavaScript 云云奇异。

假如你是位履历丰富的 JavaScript 开辟人员，也愿望能供应给你一些天天都在运用的 JavaScript 运转时现实运作机制的新看法。

JavaScript引擎

JS引擎的一个最盛行的例子就是谷歌的 V8。 V8 引擎运用在比方 Chrome 浏览器和 Node.js 中。下图是一个引擎构成部份的极简视图：

引擎由以下两个重要部份构成：

• 内存堆——这是内存分派发作的处所
• 挪用栈——这是代码实行时的客栈帧所在位置

运转时

险些一切 JavaScript 开辟者都运用过浏览器供应的 APIs（如 setTimeout）。然则那些 APIs 并不由引擎供应。

那末，它们来自那里？

实在现实情况越发庞杂一些。

所以，除了引擎以外现实上另有更多东西。我们另有那些由浏览器供应 Web APIs，如 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 实行某些非常庞杂的图象转换。

你或许会问——这有什么题目？题目在于当挪用栈中有函数守候实行时，浏览器现实上没法做其他事变——它被壅塞了。这意味着浏览器没法继承衬着，也不能运转其他代码，它只是卡住了。假如你愿望具有流通的用户体验，这就成了题目。

这并非唯一的题目。一旦你的浏览器最先实行栈里云云之多的使命，它可能会在相称长的时间里停息相应。大多数浏览器会采用报错的行动，讯问你是不是要封闭页面。

这可不是最好的用户体验，不是吗？

那末，我们要怎样在既不壅塞 UI 又不致使浏览器无相应的情况下实行大批的代码呢？解决方案是：异步回调。

这将在《JavaScript事变道理》教程的第二部份细致诠释。