详解JavaScript执行模型

JavaScript执行模型

引言

JavaScript是一个单线程（Single-threaded）异步（Asynchronous）非阻塞（Non-blocking）并发（Concurrent）语言，这些语言效果通过一个调用栈（Call Stack）、一个事件循环（Event Loop）、一个回调队列（Callback Queue）有些时候也叫任务队列（Task Queue）与跟运行环境相关的API组成。

概念

调用栈 Call Stack

调用栈是一个LIFO后进先出数据结构的函数运行栈，它内部的数据结构为函数帧。当在JavaScript中调用一个函数时，它将被压入栈中，当这个函数内部还有另一个函数被调用时，另一个函数将会被压入栈顶，直到其内部没有更多调用，栈顶函数将会被以单线程方式执行并出栈，直到最后一个函数帧出栈。JavaScript语言特性中的单线程就是指的调用栈的单线程运行。

function multiply(a, b) {
 return a * b;
}

function square(n) {
 return multiply(n, n)
}

function printSquare(n) {
 console.log(square(n));
}

printSquare(4);

首先调用栈压入main()，扫描到printSquare()函数调用调用栈压入printSquare(4)，printSquare函数内部调用square(n)该函数被压入栈，同理multiply(n, n)函数也被压入栈且没有更多调用，JavaScript引擎开始执行栈顶函数multiply(n, n)返回结果并出栈，以此类推直到main()函数出栈。

调用栈有一个意外情况，当函数递归调用其自身时调用栈将溢出，执行环境将报错。

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

任务队列 Task Queue

任务队列是WebAPI的一部分，也就是说它本身并不是ECMAScript标准的一部分，而是运行环境自行实现的。任务队列是所有回调函数排队执行的FIFO先进先出队列，它的单位是任务（Task），每个任务都关联着一个用于处理这个任务的回调函数。在事件循环（Event Loop）中会将任务队列内的函数压入调用栈执行并出队列，直至为空。

任务队列在浏览器的实现中被分为了宏任务队列（macrotask queue）和微任务队列（microtask queue），它们分别个自承载宏任务（macrotask）和微任务（microtask）的排队，其中宏任务队列与宏任务又被默认为常规的任务队列与任务。

当调用栈内所有调用都完成执行后，事件轮询会在每次处理宏任务队列的一个宏任务后处理微任务队列的全部微任务，也就是微任务基本会在宏任务处理之前被处理。微任务处理中间不会被UI或网络事件处理被执行，微任务执行是连续的。

会被添加到宏任务的方法的回调有：

  • script：script标签中的代码解析运行
  • setTimeout
  • setInterval
  • setImmediate
  • I/O
  • UI rendering：UI渲染，每16.6ms放到队列上一次，60fps，如果调用栈被占用则会被阻塞

会被添加到微任务的Web API方法有：

会被添加到微任务的Web API方法有：

  • process.nextTick：Node提供的
  • Promise
  • Object.observe
  • MutationObserver

微任务只会从我们编写的代码中产生，宏任务既可能从我们编写的代码中产生也可能从浏览器本身事件、渲染、IO产生。

事件循环 Event Loop

事件循环是JavaScript的事件处理机制，它会一直轮询消息队列，当满足调用栈为空且消息队列不为空时，它将把消息队列队头的消息压入执行栈。这样的机制保证了函数不会被中断，不会有线程切换带来的数据不一致等情况

事件循环在调用栈为空时轮询，顺序为

1.找到任务队列（宏任务队列）的最早被添加的任务并将其添加到调用栈执行

2.执行所有微任务队列内的任务

  • 当微任务队列不为空时找到微任务队列最早被添加的任务并将其添加到调用栈执行

3.渲染所有变化
4.如果宏任务队列为空等待宏任务出现
5.返回步骤1

JavaScript运行时 Runtime

浏览器的JavaScript代码执行也就是调用栈与堆（用于储存变量对象等）由JavaScript引擎提供，用的比较多的是谷歌的V8引擎，Chrome、Edge浏览器、Nodejs均使用该引擎。

事件循环Event Loop、任务队列Task Queue（回调队列Callback Queue）、WebAPI或Node API由运行环境提供。

以上就是详解JavaScript执行模型的详细内容，更多关于JavaScript执行模型的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • three.js加载obj模型的实例代码

    three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择.好了,下面通过一段代码给大家介绍three.js加载obj模型,具体代码如下所示: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="libs/three.js"></script> &l

  • JavaScript 对象模型 执行模型

    JavaScript 对象模型 执行模型

    数据类型 基本数据类型 基本数据类型是JS语言最底层的实现. 简单数值类型: 有Undefined, Null, Boolean, Number和String.注意,描述中的英文单词在这里仅指数据类型的名称,并不特指JS的全局对象N an, Boolean, Number, String等,它们在概念上的区别是比较大的. 对象: 一个无序属性的集合,这些属性的值为简单数值类型.对象或者函数.同上,这里的对象并不特指全局对象Object. 函数: 函数是对象的一种,实现上内部属性[[Class]]

  • 理解Javascript_13_执行模型详解

    函数执行环境 简单的代码: 复制代码 代码如下: function say(msg,other){ var str = "nobody say:"; this.name = '笨蛋的座右铭'; function method(){};//var method = function(){}; alert(str+msg); } say('hello world'); alert(name);//笨蛋的座右铭 当调用say方法时,第一步是创建其执行环境,在创建执行环境的过程中,会按照定义的

  • 理解Javascript_12_执行模型浅析

    理解Javascript_12_执行模型浅析

    简单的开始 简单的代码: 复制代码 代码如下: <script type="text/javascript" src="xxx.js"></script> <script type="text/javascript"> var i = 10; function say(msg){ alert(msg); } </script> <script type="text/javascrip

  • three.js实现3D模型展示的示例代码

    three.js实现3D模型展示的示例代码

    由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能够放置3D模型的画布 也可以说是初始化 Three var WIDTH,HEIGHT; var renderer; function initThree() { WIDTH = document.documentElement.clientWidth/2; <!--{foreach from=$re

  • Three.js利用orbit controls插件（轨道控制）控制模型交互动作详解

    前言 本文主要给大家介绍了关于Three.js利用orbit controls插件(轨道控制)控制模型交互动作的相关内容,这个效果相对于第八节的轨迹球插件使用上感觉要好,虽然轨迹球插件可以来回的滚动,但是容易分辨不清楚上下左右的关系,容易混乱,适合调试,而轨道控制插件orbit则适合客户使用,还不会产生混乱效果.下面讲一下使用. (1)首先引入插件,文件地址在官方案例的examples/js/controls/OrbitControls.js. (2)然后实例化函数,把相机和渲染器的dom传入,

  • JavaScript对象模型-执行模型

    JavaScript对象模型-执行模型

    简单数值类型: 有Undefined, Null, Boolean, Number和String.注意,描述中的英文单词在这里仅指数据类型的名称,并不特指JS的全局对象N an, Boolean, Number, String等,它们在概念上的区别是比较大的. 对象: 一个无序属性的集合,这些属性的值为简单数值类型.对象或者函数.同上,这里的对象并不特指全局对象Object. 函数: 函数是对象的一种,实现上内部属性[[Class]]值为"Function",表明它是函数类型,除了对象

  • Three.js加载外部模型的教程详解

    1.  首先我们要在官网: https://threejs.org/ 下载我们three.js压缩包,并将其中的build文件夹下的three.js通过script标签对的src属性导入到我们的页面中 2.  创建three.js核心对象 Scene(场景) Camera(相机) Light(光源) Mesh(模型) Renderer(渲染器) 最后一步就是渲染显示在我们的页面上了renderer.render(scene,camera) 3.  OBJ模型的导入 <script type=&quo

  • 详解JavaScript执行模型

    JavaScript执行模型 引言 JavaScript是一个单线程(Single-threaded)异步(Asynchronous)非阻塞(Non-blocking)并发(Concurrent)语言,这些语言效果通过一个调用栈(Call Stack).一个事件循环(Event Loop).一个回调队列(Callback Queue)有些时候也叫任务队列(Task Queue)与跟运行环境相关的API组成. 概念 调用栈 Call Stack 调用栈是一个LIFO后进先出数据结构的函数运行栈,它

  • 详解JavaScript引擎V8执行流程

    详解JavaScript引擎V8执行流程

    目录 一.V8来源 二.V8的服务对象 三.V8的早期架构 四.V8早期架构的缺陷 五.V8的现有架构 六.V8的词法分析和语法分析 七.V8 AST抽象语法树 八.字节码 九.Turbofan 一.V8来源 V8的名字来源于汽车的"V型8缸发动机"(V8发动机).V8发动机主要是美国发展起来,因为马力十足而广为人知.V8引擎的命名是Google向用户展示它是一款强力并且高速的JavaScript引擎. V8未诞生之前,早期主流的JavaScript引擎是JavaScriptCore引

  • 详解JavaScript Alert函数执行顺序问题

    详解JavaScript Alert函数执行顺序问题

    目录 问题 分析 解决 替换 Alert() 函数 setTimeOut函数 小结 问题 前几天使用 JavaScript 写 HTML 页面时遇到了一个奇怪的问题: 我想实现的功能是通过 confirm() 弹窗让用户选择不同的需求,每次选择后都将选择结果暂时输出到页面上,最后一次选择结束后再一次性将选项传到后端处理. 代码类似于: var step1 = confirm("exec step1?"); $('#result').html($('#result').html() +

  • 详解JavaScript 的执行机制

    一.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web Worker,但javascript是单线程这一核心仍未改变. 为什么js是单线程的语言?因为最初的js是用来在浏览器验证表单操纵DOM元素的.如果js是多线程的话,两个线程同时对一个DOM进行了相互冲突的操作,那么浏览器的解析是无法执行的. Web Worker 的作用,就是为 JavaScript 创造多线程环境,允许主线程创建 Worker 线程,将一些任务分配给后者运行.在主线程运行的同

  • 详解JavaScript中的执行上下文及调用堆栈

    详解JavaScript中的执行上下文及调用堆栈

    一.执行上下文是什么 代码运行是在一定的环境之中运行的,这个运行环境我们就成为执行环境,也就是执行上下文,按照执行环境不同,我们可以分为三类: 全局执行环境:代码首次执行时候的默认环境 函数执行环境:每当执行流程进入到一个函数体内部的时候 Eval执行环境:当eval函数内部的文本执行的时候 二.执行上下文栈是什么 既然是'栈',那就得符合'栈'的特性,即数据结构是先进后出.下面我们看一段代码: function cat(a){ if(a<0){ return false; } console.

  • 详解javascript脚本何时会被执行

    详解javascript脚本何时会被执行

    javascript脚本可以嵌入在html内的任意地方,但它何时被调用呢?当浏览器打开HTML文件后,会直接运行不是声明函数的脚本或通过事件调用脚本函数,下面分析这几种情况. 1.浏览器在打开页面时执行脚本 当浏览器打开一个HTML文件时,它会从头开始解释整个文件,包括html标签和脚本.如果脚本中有可以直接执行的语句,则会在遇到的时候马上解释执行.主要有以下2种情形: 1).程序启动(这里指浏览器加载页面)这个alert这类函数就会被触发执行 <html> <head> <

  • 详解Javascript 中的 class、构造函数、工厂函数

    到了ES6时代,我们创建对象的手段又增加了,在不同的场景下我们可以选择不同的方法来建立.现在就主要有三种方法来构建对象,class关键字,构造函数,工厂函数.他们都是创建对象的手段,但是却又有不同的地方,平时开发时,也需要针对这不同来选择. 首先我们来看一下,这三种方法是怎样的 // class 关键字,ES6新特性 class ClassCar { drive () { console.log('Vroom!'); } } const car1 = new ClassCar(); consol

  • 详解JavaScript 事件流

    事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 事件流 事件流描述的就是从页面中接收事件的顺序.而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获. 事件流类别 事件冒泡 即从下至上,从目标触发的元素逐级向上传播,直到win

  • 详解javascript实现瀑布流绝对式布局

    详解javascript实现瀑布流绝对式布局

    瀑布流也应该算是流行几年了吧.首先是由Pinterest掀起的浪潮,然后国内设计如雨后春笋般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不过最近涉黄,好像被喝茶了),还有淘宝的 "哇哦". 这些都是很棒的例子, 今天我们就聊一聊瀑布流. 一.绝对式布局: JS实现原理 其实瀑布式主要的难点就在于,如果将图片整齐的排列在对应的列下,以及什么时候开始刷新加载图片. 而图片整齐的排列的主要逻辑和算法即,先获取容器内可以放多少列,然后,通过计算,存放第一列的高度,再遍历剩下(除第一列的元

  • 详解JavaScript基本类型和引用类型

    详解JavaScript基本类型和引用类型

    一.值的类型        早在介绍JS的数据类型的时候就提到过基本类型和引用类型,不过在说两种类型之前,我们先来了解一下变量的值的类型.在ECMAScript中,变量可以存在两种类型的值,即原始值和引用值. (1)原始值        存储在栈中的简单数据段,也就是说,它们的值直接存储在变量访问的位置. (2)引用值        存储在堆中的对象,也就是说,存储在变量处的值是一个指针,指向存储对象的内存处.        为变量赋值时,ECMAScript的解释程序必须判断该值是原始类型,还

随机推荐