JavaScript工作原理（一）：引擎，运行时，调用堆栈

Jingbin_ 发布于2019-08-22 16:43 / 448人阅读

摘要：调用栈是一种单线程编程语言，这意味着它只有一个调用栈。这就是调用栈的功能。简单代码示例当引擎执行这段代码时，调用栈为空，之后运行如下每个叫做堆栈帧。调用栈就是通过堆栈帧来追踪异常，堆栈帧基本就是调用栈出现异常时候的状态。

概述

几乎每个人都已经听说过V8引擎这个概念，而且大多人都知道JavaScript是单线程的，并且使用回调队列。

这篇文章中，我们将详细介绍这些概念，并解释JavaScript实际运行的原理。通过了解这些详细信息，将能够编写更好的非阻塞应用程序，以正确利用所提供的API。

JavaScript引擎

最流行的JavaScript引擎莫过于Google的V8引擎，V8使用C++开发，Chrome浏览器和Node.js都是基于V8引擎的，简略的示意图：

V8引擎包含两个主要组件：
内存堆(Memory Heap)：负责内存分配
调用栈(Call Stack)：代码执行时，维护堆栈帧(Stack Frames)

运行时

几乎所有的JavaScript开发者都使用过setTimeout这样的API，然而这些APIs不是由V8引擎提供的。那这些APIs是哪来的呢？

尽管我们已经有了V8引擎，但实际上我们还需要更多的接口或功能。我们把那些由浏览器提供的接口称为Web APIs，比如DOM，AJAX，setTimeout等等。

接下来是事件循环（event lool）和回调队列（callback queue）。

调用栈（Call Stack）

JavaScript是一种单线程编程语言，这意味着它只有一个调用栈。因此，在同一时间它只能做一件事。

调用栈是一个数据结构，它会记录代码执行的位置。例如我们执行进入一个函数，我们会把这个函数放在堆栈的顶部，函数执行结束返回之后，我们把这个函数从堆栈中移除。这就是调用栈的功能。

简单代码示例：

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

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

printSquare(5);

当引擎执行这段代码时，调用栈为空，之后运行如下：

每个Step叫做堆栈帧（Stack Frame）。

调用栈就是通过堆栈帧来追踪异常，堆栈帧基本就是调用栈出现异常时候的状态。示例代码如下：

function foo() {
    throw new Error("SessionStack will help you resolve crashes :)");
}

function bar() {
    foo();
}

function start() {
    bar();
}

假设上面代码保存在foo.js文件，执行上面代码在Chrome浏览器中，Error的堆栈信息会如下图打印出来：

单线程执行代码是无法充分利用CPU资源，使得运行效率低。由于JavaScript只有一个调用栈，如果运行效率变低，那应该怎么解决呢？

并发和事件循环

想像一下如果调用栈里面有些函数的执行需要大量的时间，例如在浏览器中进行复杂的图片转化，情况会怎么样，为什么会有问题？

问题就是调用栈中的函数在执行的过程中，浏览器是不能做其它事情的，也就是会被调用栈中的函数阻塞，此时浏览器不能渲染和运行其它代码，完全被卡住了。这样就很难实现流畅的UIs体验。

而且另外一个问题也会由此发生，如果浏览器在调用栈中执行很多这样复杂且耗时的函数时，浏览器也会失去响应，出现假死状态。

这绝对不是我们要的用户体验。

怎么才能执行复杂且耗时的代码，并且不会阻塞UI的渲染和导致浏览器假死呢？解决方案就是异步调用。异步调用会在第二篇系列文章（V8引擎和5招优化）中解释。

GPU云服务器云服务器调用堆栈 javascript堆栈工作原理网络工作原理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94596.html

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
JavaScript是如何工作的：引擎，运行时和调用堆栈的概述！

摘要：调用栈是一种单线程编程语言，这意味着它只有一个调用堆栈。调用栈是一种数据结构，它记录了我们在程序中的位置。而且这不是唯一的问题，一旦你的浏览器开始处理调用栈中的众多任务，它可能会停止响应相当长一段时间。本文是旨在深入研究JavaScript及其实际工作原理的系列文章中的第一篇:我们认为通过了解JavaScript的构建块以及它们是如何工作的，将能够编写更好的代码和应用程序。我们还将分...

PiscesYE 2019-08-23 14:01 评论0 收藏0
前端进阶系列(七):什么是执行上下文？什么是调用栈？

摘要：什么是中的调用栈调用栈就像是程序当前执行的日志。当函数执行结束时，将从调用栈中出去。了解全局和局部执行上下文是掌握作用域和闭包的关键。总结引擎创建执行上下文，全局存储器和调用栈。原文作者：Valentino 原文链接：https://www.valentinog.com/blog/js-execution-context-call-stack 什么是Javascript中的执行上下文...

leone 2019-08-23 12:18 评论0 收藏0
JS引擎:它们是如何工作的?从调用堆栈到Promise，需要知道的所有内容

摘要：最受欢迎的引擎是，由和使用，用于，以及使用的。引擎它们是如何工作的全局执行上下文和调用堆栈刚刚了解了引擎如何读取变量和函数声明，它们最终被放入了全局内存堆中。事件循环只有一个任务它检查调用堆栈是否为空。为了保证可读性，本文采用意译而非直译。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！有没有想过浏览器如何读取和运行JS代码？这看起来很神奇，我们可以通过浏览...

lavnFan 2019-08-23 18:24 评论0 收藏0