JS事件循环机制event loop宏任务微任务原理解析

接下来我会详细讲解一下JS事件循环机制(event loop)、宏任务和微任务的原理,以及该如何理解它们之间的关系。

1. 事件循环机制(event loop)的原理

在JavaScript中,事件循环机制定义了一种代码执行模型,可以控制代码在何时执行。事件循环机制主要分为以下两个部分:

  • 执行栈(Execution Context Stack)
  • 任务队列(Task Queue)

我们可以将代码执行栈看做是一个存储函数执行上下文的地方,每当调用一个函数,就会将其对应的执行上下文压入栈中,并等待执行完毕。而任务队列则存储了当前已经准备好的任务,它们会在其他任务执行完成后,由事件循环机制取出来执行。

当JavaScript引擎首次遇到全局代码时,它会创建一个全局执行上下文,并将它压入执行栈中。而后续的任何JavaScript代码执行,都会通过执行栈中不断地加入和弹出执行上下文来实现。

在事件循环机制中,除了主线程(执行栈)之外,还有一个任务队列(Task Queue)。任务队列会接受异步任务并按照顺序存储起来,这些异步任务又分为两种类型:宏任务和微任务。

2. 宏任务和微任务的原理

宏任务

宏任务指的是那些需要进入事件队列与其他事件竞争执行权的代码块,例如:load事件、定时器事件(setTimeout、setInterval)等。

当执行栈为空时,事件循环机制会从宏任务队列中取出任务来执行,执行时期间可能会导致执行栈中再次压入执行上下文,也可能会影响变量的状态。当执行过程完成后,事件循环机制会在检查当前宏任务队列和微任务队列是否为空的情况下,执行位于队列头部的任务。

示例:

console.log('1');
setTimeout(() => {
  console.log('2');
}, 0);
console.log('3');

执行结果:

1
3
2

很显然,setTimeout函数会被放入宏任务队列中,而由于发生了异步调用,因此不会阻止主线程的执行。最后,任务队列中的宏任务被执行,并打印出“2”

微任务

微任务指的是在JavaScript引擎执行栈为空并且调用栈中的所有函数都已经返回的情况下,需要执行的代码块,例如Promise回调函数、MutationObserver监听等。

当执行栈为空时,事件循环机制会优先处理微任务队列中的任务,如果没有微任务需要处理,则会切换到宏任务队列中的事件。

示例:

console.log(1);

setTimeout(() => {
  console.log(2);
});

new Promise(resolve => {
  console.log(3);
  resolve(4);
}).then((value) => {
  console.log(value);
});

console.log(5);

执行结果:

1
3
5
4
2

在以上的示例中,Promise回调函数会被放入微任务队列中,而由于异步调用发生在“35”行代码之后,因此在主线程执行完之前,Promise回调函数就已经被放入了微任务队列中,事件循环机制就会在执行完成主线程中的执行栈之后,优先执行Promise回调函数这个微任务。最终,任务队列中的宏任务被执行,并打印出“2”。

结语

以上就是JS事件循环机制和宏任务微任务的完整攻略。通过对比分析,我们可以得出一条结论:无论是宏任务还是微任务,事件循环机制都会按照队列中的顺序依次执行它们。根据实际的业务场景,可以将需要执行的代码加入到微任务或宏任务队列中,帮助JavaScript引擎更好地控制代码的执行时机。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS事件循环机制event loop宏任务微任务原理解析 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Javascript中的方法和匿名方法实例详解

    Javascript中的方法和匿名方法实例详解 在Javascript中,方法和匿名方法是非常常用的函数形式。本文将详细讲解这两种函数的概念,区别,用法和实例。 方法 概念 方法就是被绑定到某个对象上的函数,在一个对象上定义一个方法,就是在对象上添加一个函数属性。 语法 对象名.方法名 = function(参数) { // 函数体 } 其中,对象名就是方法…

    JavaScript 2023年6月10日
    00
  • ajax跨域(基础域名相同)表单提交的方法

    基于基础域名相同的情况,ajax跨域表单提交的方法可以通过以下步骤实现: 在服务端设置允许跨域访问 首先,在服务端需要设置响应头允许跨域访问,可以使用以下代码: // Nodejs可用的代码 app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin&quot…

    JavaScript 2023年6月11日
    00
  • js面向对象之公有、私有、静态属性和方法详解

    JS面向对象之公有、私有、静态属性和方法详解 面向对象编程思想是现代编程语言的重要组成部分,在JS中同样也支持面向对象编程。在面向对象编程中,属性和方法可以被分为公有、私有、静态属性和静态方法四种类型。在本篇攻略中,我们将会详细讲解这四种类型的属性和方法。 公有属性和方法 公有属性和方法指的是可以被实例对象和类对象访问的属性和方法。在JS中可以使用this关…

    JavaScript 2023年5月27日
    00
  • JavaScript在网页中画圆的函数arc使用方法

    关于”JavaScript在网页中画圆的函数arc使用方法”,以下是详细攻略: 1. arc函数概述 arc()是Canvas API中用于绘制圆弧或圆的方法之一,其基本语法如下: context.arc(x, y, radius, startAngle, endAngle, anticlockwise); 参数含义如下: x:中心点的横坐标。 y:中心点的…

    JavaScript 2023年5月27日
    00
  • Three.js+React实现3D开放世界小游戏

    让我为您详细讲解“Three.js+React实现3D开放世界小游戏”的完整攻略。如下: 简介 Three.js是一个基于WebGL的JavaScript 3D库,提供了许多3D渲染的功能。React则是一个构建用户界面的JavaScript库,它可以使开发者更加方便地处理界面的状态和事件。 结合Three.js和React,我们可以实现一个3D开放世界小游…

    JavaScript 2023年6月11日
    00
  • 12种不宜使用的Javascript语法整理

    12种不宜使用的Javascript语法整理 在Javascript编程过程中,有一些语法在代码执行过程中会出现问题,因此不建议使用。在本文中,我们将介绍12种不宜使用的Javascript语法,以及为什么应该避免使用它们。 1. with语句 with语句可以在代码块内部将一个对象提前成为一个作用域,这样我们就可以直接访问该对象的属性和方法,而不必使用对象…

    JavaScript 2023年5月18日
    00
  • JS实现导出Excel和CSV文件操作

    JS实现导出Excel和CSV文件是前端开发中经常遇到的需求之一。在这里,我将给出完整的操作步骤和两个示例。 准备工作 在实现导出Excel和CSV文件前,需要先引入相关的依赖库。常用的依赖库有FileSaver.js和xlsx.js。 <!– 导入FileSaver.js –> <script src="https://cd…

    JavaScript 2023年5月27日
    00
  • JavaScript获取页面元素的常用方法详解

    JavaScript获取页面元素的常用方法详解 在使用JavaScript编写网页交互逻辑时,获取页面元素是一个非常重要的操作,它可以让我们通过JavaScript来修改网页内容、处理用户交互等。下面是几种常用的获取页面元素的方法。 document.getElementById() 这是最基础的获取页面元素的方法之一,它可以通过指定HTML元素的ID属性来…

    JavaScript 2023年6月10日
    00
合作推广
合作推广
分享本页
返回顶部