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 地址请查阅这里。