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

From：https://segmentfault.com/a/1190000014587266

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

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

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

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

运行时
几乎所有的JavaScript开发者都使用过setTimeout这样的API，然而这些APIs不是由V8引擎提供的。

我们已经有了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的堆栈信息会如下图打印出来：

运行在单线程上，使得运行首先。由于JavaScript只有一个调用堆栈，如果运行速度变慢，那应该怎么解决呢？

并发和事件循环
想像一下如果调用堆栈里面有些函数的执行需要大量的时间，例如复杂的图片转化，事情会怎么花样呢？

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

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

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

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

JavaScript 工作原理之十一－渲染引擎及性能优化小技巧
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
JavaScript 工作原理（二）－如何在 V8 引擎中书写最优代码的 5 条小技巧(译)
From:https://segmentfault.com/a/1190000014770145 原文请查阅这里,略有删减. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScrip ...
JavaScript 工作原理之十一－渲染引擎及性能优化小技巧 1
原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第十一章. 迄 ...
JavaScript 工作原理之二－如何在 V8 引擎中书写最优代码的 5 条小技巧(译)
原文请查阅这里,略有删减. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第二章. 本章将会深入谷歌 V8 引擎的内部结构.我们也会为如何书写更好的 Java ...
JavaScript 工作原理之五－深入理解 WebSockets 和带有 SSE 机制的HTTP/2 以及正确的使用姿势(译)...
原文请查阅这里,略有改动,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland. 本系列持续更新中,Github 地址请查阅这里. 这是 JavaScript 工作原理的第五章. 现在 ...
JavaScript工作原理
HTML代码所表示的文档是一种静态文档,几乎没有交互功能,很难使页面成为动态页面.增加脚本语言,可使数据发送到服务器之前先进行处理和校验,动态地创建新的Web内容,更重要的是,引入脚本语言使我们有了事 ...
JavaScript工作原理（二）：V8引擎和5招高效代码
本系列的第一篇文章重点介绍了引擎,运行时和调用栈的概述.第二篇文章将深入V8的JavaScript引擎的内部.我们还会提供一些关于如何编写更好的JavaScript代码的技巧. 概述 JavaScri ...
Java规则引擎工作原理及其应用
摘要 Java规则引擎是一种嵌入在Java程序中的组件,它的任务是把当前提交给引擎的Java数据对象与加载在引擎中的业务规则进行测试和比对,激活那些符合当前数据状态下的业务规则,根据业务规则中声明的 ...
smarty模板引擎工作原理
1.模板引擎是什么展示给用户的页面由数据及承载数据的标签组成,标签就是html,而数据就是由php处理的变量,这样就涉及到了前端和后端的交互,模板引擎就是将php代码与html代码分离的技术. sm ...

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

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

最新文章

热门文章