【译】JavaScript的工作原理:引擎,运行时和调用堆栈的概述

随着javascript变得越来越流行,很多团队的技术栈都开始使用它,比如前端、后端、hybrid、嵌入式设备等。

这篇文章是一个系列旨在深入了解JavaScript它实际上是如何运行的,我们认为,通过了解JavaScript的运行原理可以让你编写更好的代码和应用程序

如GitHut统计数据所示,JavaScript是活跃在顶部对于Repositories和Pushes,它不会落后太多其他类别。

如果项目越来越依赖于JavaScript,这意味着开发人员必须利用语言和生态系统提供的所有内容,对内部进行更深入的了解,以便构建出色的软件。

事实证明,有很多开发人员每天都在使用JavaScript,但却不了解幕后发生的事情。

概述

几乎每个人都已经听说过V8引擎作为一个引擎,大多数人都知道JavaScript是单线程的,或者它使用的是回调队列。

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

如果您对JavaScript比较陌生,那么这篇博文将帮助您理解为什么JavaScript与其他语言相比如此“奇怪”。

如果您是一位经验丰富的JavaScript开发人员,希望它会为您提供一些关于JavaScript的新见解。

JavaScript 引擎

Google的V8是使用最广泛的JavaScript引擎,它被使用在node.js和chrome浏览器当中,这是简化后的样子:

这个引擎包含两个组件:

  • 内存堆——这个是内存分配发生的地方
  • 调用堆栈——这是JavaScript代码执行的数据帧所在的地方

运行时

有些API在浏览器中已经被几乎所有的JavaScript开发人员使用过(比如:setTimeout),这些API并不是引擎所提供的。

那么是来自哪儿的呢?事实证明,它是有点复杂。

有一些叫做Web API的东西,它们是由浏览器提供的,比如DOM,AJAX,setTimeout等等。

然后,它还有事件循环和回调队列。

调用堆栈

JavaScript是一种单线程编程语言,这意味着它只有一个Call Stack(调用堆栈)。因此,它只能一次做一件事。调用栈是一种数据结构,它基本上记录了代码运行在程序中的位置。如果我们运行函数,将把它放在堆栈的顶部。如果我们从函数返回,我们会从堆栈的顶部弹出来。

这就是所有堆栈都可以做到的。

我们来看一个例子吧。看一下下面的代码:

当这个引擎开始执行这个代码的时候,堆栈目前是空的,之后,步骤如下:

调用堆栈中的每个条目称为堆栈帧。

这儿是抛出异常时堆栈跟踪的构造方式 - 它基本上是异常发生时调用堆栈的状态。看一下下面的代码:

如果这份代码在chrome当中执行(代码文件被命名成foo.js),堆栈将会报出如下错误:

“爆栈”——当达到最大调用堆栈大小时会发生这种情况,这很容易发生,特别是如果你使用递归而没有测试你的代码。

看看这个示例代码:

当引擎开始执行这份代码的时候,它将开始调用“foo”函数,然而这个函数是一个调用自身并且没有任何终止条件的递归函数,因此,每一步执行,相同的函数会一遍又一遍被添加到调用堆栈,如下图:

在某种程度上,函数调用在调用堆栈的数量超过实际的调用堆栈的大小,浏览器会决定采取行动,通过抛出一个错误,如下:

在单个线程上运行代码非常简单,因为您不必处理多线程环境中出现的复杂场景 - 例如,死锁。

由于JavaScript只有一个Call Stack,在单个线程上运行也是非常有限的。当运行变慢时会发生什么?

并发和事件循环

如果在调用堆栈中有函数调用需要花费大量时间才能处理,会发生什么?

例如,假设您想在浏览器中使用JavaScript进行一些复杂的图像转换。

你可能会问 - 这怎么会是一个问题?

问题是,虽然调用堆栈具有执行功能,但浏览器实际上无法执行任何其他操作当它在执行其他代码的时候 - 它会被阻塞。这意味着浏览器无法渲染,它无法运行任何其他代码,它被卡住了。如果您想在应用中使用流畅的UI,这也是一个问题。

这不是唯一的问题。

一旦您的浏览器开始在调用堆栈中处理很多的任务,它可能会在相当长的时间内停止响应。

大多数浏览器通过引发错误来采取行动,询问您是否要终止网页。

这样用户体验会变得很不好。

那么,如何在不阻止UI并使浏览器无响应的情况下执行繁重的代码呢?

好吧,解决方案是异步回调。

这将在“JavaScript的工作原理”系列中的第2部分进行更详细的解释:“V8引擎内部+关于如何编写优化代码的5个技巧”。

后续文档翻译会陆续跟进!!

后续将推出系列文章《一个大型图形化应用0到1的过程》

原文发布于微信公众号 - 玄魂工作室(xuanhun521)

原文发表时间:2018-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏学习有记

学委助手

学委除了要收作业,最烦的就是统计谁没有交作业啦,还有就是大家的命名不统一造成文件排序混乱,更加大了学委统计的难度。所以,写这个应用的目的就是查交和格式化文件命名...

22520
来自专栏linux、Python学习

黑客们会用到哪些Python技术?

Python已经成为漏洞开发领域的行业标准,读者会发现大多数概念验证工具都是用Python语言编写的(除了用Ruby写的安全漏洞检测工具)。Python允许开发...

22240
来自专栏腾讯NEXT学位

JavaScript Worker 另类玩法

13230
来自专栏数据之美

玩转 Nginx 之:使用 Lua 扩展 Nginx 功能

1、Nginx 简介 Nginx 作为一款面向性能设计的HTTP服务器,相较于Apache、lighttpd具有占有内存少,稳定性高等优势。其流行度越来越高,应...

1.3K70
来自专栏用户2442861的专栏

使用 libevent 和 libev 提高网络应用性能——I/O模型演进变化史

http://blog.csdn.net/hguisu/article/details/38638183(牛逼100多名)

29010
来自专栏阿杜的世界

【转】Dubbo架构设计详解总体架构核心要点参考资料

Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合)。从服务模型的角度...

12150
来自专栏性能与架构

Redis 优化执行命令的延时

Redis 是单线程的,客户端的命令请求在server中会被排队,按照顺序处理,如果队列长,命令执行结果的响应时间便会长 ? 如果客户端想要快点得到执行结果,可...

63960
来自专栏Java技术栈

分布式 | Dubbo 架构设计详解

Dubbo是Alibaba开源的分布式服务框架,它最大的特点是按照分层的方式来架构,使用这种方式可以使各个层之间解耦合(或者最大限度地松耦合)。从服务模型的角度...

17320
来自专栏游戏杂谈

svn导出文件进行比较

之前有介绍svn log 的命令,即可导出版本A~B之间所有的修改动作,然后复制出相应的文件(中间有一个算法去处理每一个动作,然后得到最终需要导出的文件列表,...

20830
来自专栏周明礼的专栏

一步一步带你搭建一个“摩登”的前端开发环境

最近几年也陆续推出了多种不同的js类型系统用于增强js的健壮性,其中像 typescript 就是其中的佼佼者。当然我今天要讲的并不是typescript,而是...

1.5K00

扫码关注云+社区

领取腾讯云代金券