本文是旨在深入研究JavaScript及其实际工作原理的系列文章中的第一篇：我们认为，通过了解JavaScript的构建块及其工作原理，我们将能够编写更好的代码和应用程??序。我们还将分享我们在构建SeStHealsStad时使用的一些经验法则，SeStHealsStad是一个轻量级的JavaScript应用程序，必须保持健壮和高性能才能保持竞争力。正如GitHub统计数据所示，JavaScript在GitHub中的活跃存储库和总推送量方面位居榜首。它也不落后于其他类别。如果项目越来越依赖JavaScript，这意味着开发人员必须利用该语言和生态系统所提供的一切，更深入地了解其内部结构，以构建出色的软件。事实证明，有很多开发人员每天都在使用JavaScript，却不知道幕后发生了什么。概述几乎每个人都听说过V8引擎，并且大多数人都知道JavaScript是单线程的，或者它使用回调队列。在本文中，我们将详细介绍这些概念并解释JavaScript的实际工作原理。通过了解这些细节，您将能够通过正确使用提供的API来编写更好的、非阻塞的应用程序。如果您是JavaScript的新手，本文将帮助您理解为什么JavaScript与其他语言相比如此“怪异”。如果您是一位经验丰富的JavaScript开发人员，希望它能让您对您每天使用的JavaScript运行时的实际工作方式有一些新的认识。JavaScript引擎的一个流行示例是Google的V8引擎。比如在Chrome和Node.js中使用V8引擎，这里有一个非常简化的视图：V8引擎主要由两部分组成：emoryHeap（内存堆）—内存分配地址CallStack（调用栈）——代码所在执行运行时（runtime）时常会用到一些浏览器API（例如：setTimeout），但这些API并不是引擎提供的。那么它们来自哪里？其实这里的实际情况有点复杂。所以我们除了引擎还有很多API。我们将这些浏览器提供的API称为WebAPI，例如DOM、AJAX、setTimeout等。然后我们还有非常流行的事件循环和回调队列。调用堆栈JavaScript是一种单线程编程语言，这意味着它只有一个调用堆栈。因此，它一次只能做一件事。调用栈是一个数据结构，记录了我们在程序中的位置。如果我们运行到一个函数，它会把它放在栈顶，当我们从这个函数返回时，它会从栈顶弹出这个函数，这就是调用栈所做的。举个例子：当程序开始执行时，调用栈是空的，然后，步骤如下：调用栈中的每一个入口称为一个调用帧。这样就清楚了堆栈跟踪是如何构建的，以及发生异常时堆栈的状态是什么。让我们看一下下面的代码：js文件），将生成以下堆栈跟踪：“stackoverflow”，当您达到调用堆栈的大小时会发生***，并且很容易发生，尤其是如果你写递归的时候，并没有完全测试它。让我们看一下下面的代码：当引擎开始执行这段代码时，它首先调用函数“foo”。但是，此函数是递归的，并且在没有任何终止条件的情况下开始调用自身。于是，在执行的每一步，同一个函数一次又一次地被添加到调用栈中，如下图：然而，在某个时候，调用栈中的函数调用数量超过了调用栈的实际大小，浏览器决定采取行动并抛出错误，它可能是这样的：在单线程上运行代码很容易，因为您不必处理多线程环境中出现的复杂场景——例如死锁。但是在一个线程上运行也有很大的局限性，因为JavaScript只有一个调用堆栈，当某一段代码变慢时会发生什么？当调用堆栈中的函数调用需要大量时间来处理时，会发生并发和事件循环什么？例如，假设您想使用JavaScript在浏览器中执行一些复杂的图像转换。您可能会问-为什么这是个问题？问题是，当调用堆栈有函数要执行时，浏览器实际上不能做任何其他事情——它被阻塞了，这意味着浏览器无法呈现，它无法运行任何其他代码，它只是被卡住了，这如果您希望在您的应用程序中使用平滑的页面效果，则会产生问题。这不是唯一的问题，一旦您的浏览器开始处理调用堆栈中的大量任务，它可能会在相当长的一段时间内停止响应。大多数浏览器都会这样做，报告错误，并询问您是否要终止该网页。这不是最好的用户体验，是吗？那么，我们如何才能在不阻塞UI并使浏览器无响应的情况下执行大量代码呢？解决方案是异步回调。这个会在下一篇文章中说明，我会第一时间整理原作者的内容！与此同时，如果您无法理解JavaScript应用程序中正在发生的事情，请查看SessionStack。SessionStack记录Web应用程序中的所有内容：所有DOM更改、用户交互、JavaScript异常、堆栈跟踪、失败的网络请求和调试消息。借助SessionStack，您可以在Web应用程序中将问题作为视频重播，并查看发生在用户身上的一切。
