摘要：调用栈是单线程编程语言，意味着它只有单一的调用栈。调用栈是一种数据结构，基本记录了程序运行的位置。举个例子，先来看如下所示的代码当引擎开始执行这段代码时，调用栈将是空的。这正是抛出异常时栈追踪的构造过程这基本上就是异常抛出时调用栈的状态。
原文 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工作原理》教程的第二部分详细解释。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103759.html
摘要：本文将会深入分析的引擎的内部实现。该引擎使用在谷歌浏览器内部。同其他现代引擎如或所做的一样，通过实现即时编译器在执行时将代码编译成机器代码。这可使正常执行期间只发生相当短的暂停。 原文 How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code 几周前我们开始了一个系列博文旨在深入...
摘要：本系列的第一篇文章着重提供一个关于引擎运行时和调用栈的概述。在硬件层面，计算机内存由大量的触发器组成。每个触发器包含几个晶体管能够存储一个比特译注位。可以通过唯一标识符来访问单个触发器，所以可以对它们进行读写操作。比特称为个字节。 原文 How JavaScript works: memory management + how to handle 4 common memory lea...
摘要：本章会对语言引擎，运行时，调用栈做一个概述。调用栈只是一个单线程的编程语言，这意味着它只有一个调用栈。查看如下代码当引擎开始执行这段代码的时候，调用栈会被清空。之后，产生如下步骤调用栈中的每个入口被称为堆栈结构。 原文请查阅这里，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原...
摘要：本章会对语言引擎，运行时，调用栈做一个概述。调用栈只是一个单线程的编程语言，这意味着它只有一个调用栈。查看如下代码当引擎开始执行这段代码的时候，调用栈会被清空。之后，产生如下步骤调用栈中的每个入口被称为堆栈结构。 原文请查阅这里，本文采用知识共享署名 4.0 国际许可协议共享，BY Troland。 本系列持续更新中，Github 地址请查阅这里。 这是 JavaScript 工作原...
摘要：调用栈是一种单线程编程语言，这意味着它只有一个调用堆栈。调用栈是一种数据结构，它记录了我们在程序中的位置。而且这不是唯一的问题，一旦你的浏览器开始处理调用栈中的众多任务，它可能会停止响应相当长一段时间。 本文是旨在深入研究JavaScript及其实际工作原理的系列文章中的第一篇:我们认为通过了解JavaScript的构建块以及它们是如何工作的，将能够编写更好的代码和应用程序。我们还将分...
阅读 2193·2019-08-30 15:56
阅读 824·2019-08-30 15:55
阅读 3100·2019-08-30 15:44
阅读 836·2019-08-30 10:53
阅读 1699·2019-08-29 16:33
阅读 2176·2019-08-29 16:13
阅读 619·2019-08-29 12:41
阅读 755·2019-08-26 13:56
