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日

相关文章

  • js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】

    当网页中所有的元素都被加载之后,我们可以使用JS中的文档就绪函数来动态改变页面内容。其中,innerHTML和innerText是两个用于改变元素内容的函数。下面详细介绍如何使用这两个函数实现动态改变页面内容的效果。 1. 文档就绪函数 JavaScript提供了两种文档就绪函数: window.onload: 当整个页面(包括图片、样式文件等)都加载完毕之…

    JavaScript 2023年6月10日
    00
  • JS数组方法some、every和find的使用详情

    JS数组方法some、every和find的使用详情 在 JavaScript 中,数组是一种常用的数据结构类型,而对于数组的操作,有三种常用的数组方法,它们分别是 some、every 和 find,本文将详细讲解它们的使用方法。 some方法 some 方法用于判断目标数组中是否存在至少一个元素满足指定的条件,如果满足则返回 true,如果不满足则返回 …

    JavaScript 2023年5月27日
    00
  • JS验证日期的格式YYYY-mm-dd 具体实现

    JS验证日期的格式可以使用正则表达式来完成。代码实现如下: // 定义正则表达式 var reg = /^(\d{4})-(\d{2})-(\d{2})$/; // 验证日期格式 function verifyDate(dateStr) { if (reg.test(dateStr)) { return true; } else { return false…

    JavaScript 2023年5月27日
    00
  • javascript对象的多种合并方式详解

    下面是针对 “JavaScript 对象的多种合并方式” 的完整攻略: 标题 JavaScript 对象的多种合并方式详解 简介 JavaScript 中对象合并是一种非常常见的操作,它可以让开发者把已有的对象拼接在一起,生成一个新的对象。本文将会详细讲解 JavaScript 中对象合并的多种方法。 对象合并的多种方式 Object.assign() Ob…

    JavaScript 2023年5月27日
    00
  • 分享两段简单的JS代码防止SQL注入

    为了防止SQL注入攻击,可以在网站后端对用户输入的数据进行检查和过滤,也可以在前端对用户输入的数据进行过滤和处理。本篇文章将介绍两种防止SQL注入的前端处理方法。 方法一:使用正则表达式 正则表达式是一种强大的文本处理工具,可以用来验证和过滤用户输入的数据。如果我们想要防止SQL注入攻击,可以使用正则表达式过滤掉用户输入的一些特殊字符,比如单引号、双引号、分…

    JavaScript 2023年6月10日
    00
  • JavaScript实现可终止轮询请求的方法

    我将为您详细讲解“JavaScript实现可终止轮询请求的方法”的完整攻略。 1. 什么是轮询请求 轮询请求是指客户端通过一定的时间间隔周期性地向服务器发送请求,以获取最新的数据或状态。一般来说,客户端需要不断向服务器发送请求,直到服务端返回需要的最新信息。 2. 实现可终止轮询请求的方法 2.1 XMLHttpRequest XMLHttpRequest是…

    JavaScript 2023年6月11日
    00
  • web前端页面生成exe可执行文件的方法

    生成可执行文件的方法有很多,根据您的需求和技能水平不同,可能有多种选择。在此,本文将介绍两种常见的方法。 方法一:使用NW.js NW.js是一个基于node.js和Chromium浏览器的应用程序框架,可用于构建跨平台桌面应用程序。由于它包括一个完整的Chromium浏览器内核,因此可以将web页面打包成单个可执行文件,不需要用户安装任何浏览器就可以运行。…

    JavaScript 2023年5月27日
    00
  • 教你用js截取字符串开头、结尾及两字符串之间的内容

    教你用JS截取字符串开头、结尾及两字符串之间的内容 在JS中,截取字符串是非常常见的一个操作,本文将为大家介绍如何用JS截取字符串的操作,并提供两个示例。 一、截取字符串的基本用法 JS提供了substr和slice两种方法来截取字符串,不同的是它们的参数使用方式不同。 1. substr 它接受两个参数,第一个参数是开始截取的位置,第二个参数是截取的长度。…

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