JavaScript 对引擎、运行时、调用堆栈的概述理解


Posted in Javascript onOctober 22, 2018

 随着JavaScript越来越流行,越来越多的团队广泛的把JavaScript应用到前端、后台、hybrid 应用、嵌入式等等领域。

这篇文章旨在深入挖掘JavaScript,以及向大家解释JavaScript是如何工作的。我们通过了解它的底层构建以及它是怎么发挥作用的,可以帮助我们写出更好的代码与应用。据 GitHut 统计显示,JavaScript 长期占据GitHub中 Active Repositories 和 Total Pushes 的榜首,并且在其他的类别中也不会落后太多。

JavaScript 对引擎、运行时、调用堆栈的概述理解

如果一个项目越来越依赖 JavaScript,这就意味着开发人员必须利用这些语言和生态系统提供更深层次的核心内容去构建一个令人振奋的应用。然而,事实证明,有很多的开发者每天都在使用 JavaScript,但是却不知道在底层 JavaScript 是怎么运作的。

概述

几乎每个人听说过 V8 引擎的概念,而且,大多数人都知道 JavaScript 是单线程的,或者是它是使用回调队列的。
在这篇文章中,我们将详细的介绍这些概念,并解释 JavaScript 是怎么工作的。通过了解这些细节,你就能利用这些提供的 API 来写出更好的,非阻塞的应用来。如果你对 JavaScript 比较陌生,那么这篇文章将帮助您理解为什么 JavaScript 相较于其他语言显得如此“怪异”。如果您是一位经验丰富的 JavaScript 开发人员,希望它能给你带来一些新的见解,说明 JavaScript 的运行时,尽管你可能每天都会用到它。

JavaScript 引擎

JavaScript 引擎说起来最流行的当然是谷歌的 V8 引擎了, V8 引擎使用在 Chrome 以及 Node 中,下面有个简单的图能说明他们的关系:

JavaScript 对引擎、运行时、调用堆栈的概述理解

这个引擎主要由两部分组成:

  • 内存堆:这是内存分配发生的地方
  • 调用栈:这是你的代码执行时的地方

运行时

有些浏览器的 API 经常被使用到(比如说:setTimeout),但是,这些 API 却不是引擎提供的。那么,他们是从哪儿来的呢?事实上这里面实际情况有点复杂。

JavaScript 对引擎、运行时、调用堆栈的概述理解

所以说我们还有很多引擎之外的 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);

当程序开始执行的时候,调用栈是空的,然后,步骤如下:

JavaScript 对引擎、运行时、调用堆栈的概述理解

每一个进入调用栈的都称为__调用帧__。

这能清楚的知道当异常发生的时候堆栈追踪是怎么被构造的,堆栈的状态是如何的。让我们看一下下面的代码:

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

如果这发生在 Chrome 里(假设这段代码实在一个名为 foo.js 的文件中),那么将会生成以下的堆栈追踪:

JavaScript 对引擎、运行时、调用堆栈的概述理解

"堆栈溢出",当你达到调用栈最大的大小的时候就会发生这种情况,而且这相当容易发生,特别是在你写递归的时候却没有全方位的测试它。我们来看看下面的代码:

function foo() {
 foo();
 }
 foo();

当我们的引擎开始执行这段代码的时候,它从 foo 函数开始。然后这是个递归的函数,并且在没有任何的终止条件的情况下开始调用自己。因此,每执行一步,就会把这个相同的函数一次又一次地添加到调用堆栈中。然后它看起来就像是这样的:

JavaScript 对引擎、运行时、调用堆栈的概述理解

然后,在某一时刻,调用栈中的函数调用的数量超过了调用栈的实际大小,浏览器决定干掉它,抛出一个错误,它看起来就像是这样:

 

在单个线程上运行代码很容易,因为你不必处理在多线程环境中出现的复杂场景——例如死锁。但是在一个线程上运行也非常有限制。由于 JavaScript 只有一个调用堆栈,当某段代码运行变慢时会发生什么?

并发与事件循环

调用栈中的函数调用需要大量的时间来处理,那么这会发生什么情况呢?例如,假设你想在浏览器中使用 JavaScript 进行一些复杂的图片转码。

你可能会问?这算什么问题?事实上,问题是当调用栈有函数要执行,浏览器就不能做任何事,它会被堵塞住。这意味着浏览器不能渲染,不能运行其他的代码,它被卡住了。如果你想在应用里让 UI 很流畅的话,这就会产生问题。

而且这不是唯一的问题,一旦你的浏览器开始处理调用栈中的众多任务,它可能会停止响应相当长一段时间。大多数浏览器都会这么做,报一个错误,询问你是否想终止 web 页面。

JavaScript 对引擎、运行时、调用堆栈的概述理解

总结

以上所述是小编给大家介绍的JavaScript 对引擎、运行时、调用堆栈的概述理解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery tools 系列 scrollable(2)
Sep 06 Javascript
JavaScript 事件系统
Jul 22 Javascript
js调用css属性写法
Sep 21 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
AngularJS中的Promise详细介绍及实例代码
Dec 13 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
Vue如何使用混合Mixins和插件开发详解
Feb 05 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 #Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
React SSR样式及SEO的实践
Oct 22 #Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 #Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 #Javascript
electron实现qq快捷登录的方法示例
Oct 22 #Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 #Javascript
You might like
PHP写入WRITE编码为UTF8的文件的实现代码
2008/07/07 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
PHP Session 变量的使用方法详解与实例代码
2013/09/11 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
thinkphp下MySQL数据库读写分离代码剖析
2017/04/18 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
firefox和IE系列的相关区别整理 以备后用
2009/12/28 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
JavaScript基于setTimeout实现计数的方法
2015/05/08 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
javascript实现图片轮播效果
2016/01/20 Javascript
layui导航栏实现代码
2017/05/19 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
vue加载完成后的回调函数方法
2018/09/07 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
node.js实现为PDF添加水印的示例代码
2018/12/05 Javascript
vue实现在v-html的html字符串中绑定事件
2019/10/28 Javascript
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
2020/09/16 Javascript
详解python之简单主机批量管理工具
2017/01/27 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
python实现翻译word表格小程序
2020/02/27 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
Adobe Html5 Extension开发初体验图文教程
2017/11/14 HTML / CSS
HTML5 drag和drop具体使用详解
2021/01/18 HTML / CSS
母亲追悼会答谢词
2014/01/27 职场文书
2014国庆节主题活动方案:快乐的国庆节
2014/09/16 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android
《月歌。》宣布制作10周年纪念剧场版《RABBITS KINGDOM THE MOVIE》
2022/04/02 日漫