写点什么

Javascript 的工作原理:引擎、运行时和调用堆栈概述

用户头像
devpoint
关注
发布于: 5 小时前
Javascript 的工作原理:引擎、运行时和调用堆栈概述

随着 JavaScript 越来越流行,使其应用的场景越来越多,不仅限于前端,可以是后端、混合应用程序、嵌入式设备等等,于是就有了大前端的叫法。本文开始带大家一起回顾总结 JavaScript 的构建块以及它们是如何协同工作,理解其原理,将有助于编写更优的代码。

概述

大部份人都听说过 V8 引擎,都知道 JavaScript 是单线程的,或者它使用的是回调队列。下面将围绕这些概念展开,并解释 JavaScript 的实际运行方式。通过了解这些细节,能够编写更好的、无阻塞的应用程序,并正确利用所提供的 API。

JavaScript 引擎

JavaScript 引擎中最流行的莫过于 Google 开发的 V8 引擎,可以用于 Chrome 和 Node.js。下面是它的架构图:



引擎由两个主要部份组成:


  • 内存堆:内存分配发生的地方

  • 调用栈:代码执行时的堆栈帧所在的地方

Runtime

浏览器中的 API 几乎大部份 JavaScript 开发工程师都使用过(例如:setTimeout)。但是,这些 API 并不是由 JavaScript 引擎提供的。那么,它们是谁提供的呢?来自哪里?



因此除了引擎,实际上还有很多,如浏览器提供的 Web Api,如:DOMAJAXsetTimeout 等等。


然后,还有非常流行的 event loopcallback queue

调用栈

JavaScript 是一种单线程编程语言,这意味着它只有一个调用堆栈,因此它一次只能做一件事。


调用栈是一种数据结构,它基本上记录了在程序中的位置。如果进入一个函数,会将它放在栈顶。如果从一个函数返回,会从栈顶推出。这是堆栈可以做的所有事情。


看看下面的代码:


const multiply = (x, y) => {    return x * y;};const square = (x) => {    const s = multiply(x, x);    console.log(s);};square(6);
复制代码


当引擎开始执行此代码时,调用堆栈开始为空,之后,步骤如下:



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


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


function foo() {    throw new Error("foo异常抛出!");}function bar() {    foo();}function start() {    bar();}start();
复制代码


如果在 Chrome 中执行此操作(假设此代码位于名为 foo.js 的文件中),将生成以下堆栈跟踪:



Blowing the stack :当达到最大调用堆栈大小时会发生这种情况,这种情况很容易发生,特别是如果使用递归而没有全面测试。看看这个示例代码:


function foo() {    foo();}foo();
复制代码


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



然而,在某些时候,调用堆栈中的函数调用数量超过了调用堆栈的实际大小,浏览器决定采取行动,抛出一个错误,它可能如下所示:



在单线程上运行代码非常容易出现这种情况。

并发和事件循环

如果调用堆栈中的函数调用需要花费大量时间来处理,会发生什么情况?例如,假设想在浏览器中使用 JavaScript 进行一些复杂的图像转换。


如果调用堆栈有要执行的函数,浏览器实际上不能做任何其他事情,这个时候处于阻塞状态。这意味着浏览器无法渲染,无法运行任何其他代码,出现卡住的现象。如果想在应用中使用流畅的 UI,就需要避免阻塞情况的出现。


如果浏览器开始在调用堆栈中处理很多的任务,它可能会在很长一段时间内停止响应,大多数浏览器通过触发错误来终止此类行动,并询问是否要终止网页。

总结

本文简单介绍了 Javascript 的引擎、运行时和调用堆栈,调用堆栈阻塞、卡死的情况将在接下来的《深入了解 V8 引擎》介绍优化技巧。

发布于: 5 小时前阅读数: 6
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
Javascript 的工作原理:引擎、运行时和调用堆栈概述