【EventLoop】问题一次搞定

news2024/11/24 22:39:16

📍 JS的事件循环机制恐怕是大多数前端开发者头顶上的一座大山之一,最近通过拜读两篇文档,对eventloop进行了深刻的理解;通过这篇文档对要点进行总结;

article1

波神的这篇eventLoop文章适合反复重温,写的很透彻,比其他解读事件机制的文章更加清晰透彻

前端基础进阶(十四):深入核心,详解事件循环机制

article2

这一篇从同步异步,微任务宏任务来详细解读。

setTimeout和setImmediate到底谁先执行,本文让你彻底理解Event Loop - _蒋鹏飞 - 博客园

同步异步

我们一直说JS是单线程的,其实指的是,js运行的主线程只有一个,但是整个运行环境并不是单线程的;

js除了主线程外,还有定时器线程,事件触发线程,异步HTTP请求线程;

在js主线程中,有一个唯一的事件循环 Event loop(先不说web worker),从同步异步角度分析,流程图大致如下:

  1. 主线程每次执行时,先看看要执行的是同步任务,还是异步的API
  2. 同步任务就继续执行,一直执行完
  3. 遇到异步API就将它交给对应的异步线程,自己继续执行同步任务
  4. 异步线程执行异步API,执行完后,将异步回调事件放入事件队列上
  5. 主线程上的同步任务干完后就来事件队列看看有没有任务
  6. 主线程发现事件队列有任务,就取出里面的任务执行
  7. 主线程不断循环上述流程

微任务,宏任务

上面只是简化版的Eventloop,事件队列还会分为微任务,宏任务。

  1. Event Loop是唯一的,可以有一个或多个事件队列,但是只有一个微任务队列;
  2. 宏任务包括:script整体代码,settimeout,setInterval,setImmediate,rendering;
  3. 微任务包括:process.nextTick, Promise;
  4. setTimeout/Promise等我们称之为任务源。而进入任务队列的是他们指定的具体执行任务;
  5. 来自不同任务源的任务会进入到不同的任务队列。其中setTimeout与setInterval是同源的;
  6. 微任务队列全部执行完会重新渲染一次;
  7. 每个宏任务执行完都会重新渲染一次;
  8. requestAnimationFrame处于渲染阶段,不在微任务队列,也不在宏任务队列;
  9. 它从script(整体代码)开始第一次循环。之后全局上下文进入函数调用栈。直到调用栈清空(只剩全局),然后执行所有的micro-task。当所有可执行的micro-task执行完毕之后。循环再次从macro-task开始,找到其中一个任务队列执行完毕,然后再执行所有的micro-task,这样一直循环下去。

注意点

// setTimeout中的回调函数才是进入任务队列的任务
setTimeout(function() {
  console.log('xxxx');
})
// 非常多的同学对于setTimeout的理解存在偏差。所以大概说一下误解:
// setTimeout作为一个任务分发器/任务源头,这个函数会立即执行,而它所要分发的任务,
// 也就是它的第一个参数,才是延迟执行

下面,通过一个复杂的栗子🌰,我们来看一下,事件队列都是怎么运行的:

console.log('golb1');

setTimeout(function() {
    console.log('timeout1');
    process.nextTick(function() {
        console.log('timeout1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout1_promise');
        resolve();
    }).then(function() {
        console.log('timeout1_then')
    })
})

setImmediate(function() {
    console.log('immediate1');
    process.nextTick(function() {
        console.log('immediate1_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate1_promise');
        resolve();
    }).then(function() {
        console.log('immediate1_then')
    })
})

process.nextTick(function() {
    console.log('glob1_nextTick');
})
new Promise(function(resolve) {
    console.log('glob1_promise');
    resolve();
}).then(function() {
    console.log('glob1_then')
})

setTimeout(function() {
    console.log('timeout2');
    process.nextTick(function() {
        console.log('timeout2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('timeout2_promise');
        resolve();
    }).then(function() {
        console.log('timeout2_then')
    })
})

process.nextTick(function() {
    console.log('glob2_nextTick');
})
new Promise(function(resolve) {
    console.log('glob2_promise');
    resolve();
}).then(function() {
    console.log('glob2_then')
})

setImmediate(function() {
    console.log('immediate2');
    process.nextTick(function() {
        console.log('immediate2_nextTick');
    })
    new Promise(function(resolve) {
        console.log('immediate2_promise');
        resolve();
    }).then(function() {
        console.log('immediate2_then')
    })
})


 

第一步:宏任务script首先执行。全局入栈。glob1输出。

第二步,执行过程遇到setTimeout。setTimeout作为任务分发器,将任务分发到对应的宏任务队列中。

第三步:执行过程遇到setImmediate。setImmediate也是一个宏任务分发器,将任务分发到对应的任务队列中。setImmediate的任务队列会在setTimeout队列的后面执行。

第四步:执行遇到nextTick,process.nextTick是一个微任务分发器,它会将任务分发到对应的微任务队列中去。

第五步:执行遇到Promise。Promise的then方法会将任务分发到对应的微任务队列中,但是它构造函数中的方法会直接执行。因此,glob1_promise会第二个输出。

第六步:执行遇到第二个setTimeout。

第七步:先后遇到nextTick与Promise

第八步:再次遇到setImmediate。

第一轮循环结束,开始执行第一轮循环中所有的微任务队列

其中,nextTick队列会比Promie先执行。nextTick中的可执行任务执行完毕之后,才会开始执行Promise队列中的任务。

当所有可执行的微任务执行完毕之后,这一轮循环就表示结束了。下一轮循环继续从宏任务队列开始执行。

所以就从setTimeout队列开始执行

只有当setTimeout中所有的任务执行完毕之后,才会再次开始执行微任务队列。并且清空所有的可执行微任务。

setTiemout队列产生的微任务执行完毕之后,循环则回过头来开始执行setImmediate队列。仍然是先将setImmediate队列中的任务执行完毕,再执行所产生的微任务。

当setImmediate队列执行产生的微任务全部执行之后,第二轮循环也就结束了。

当我们在执行setTimeout任务中遇到setTimeout时,它仍然会将对应的任务分发到setTimeout队列中去,但是该任务就得等到下一轮事件循环执行了。例子中没有涉及到这么复杂的嵌套,大家可以动手添加或者修改他们的位置来感受一下循环的变化。

//执行第一轮宏任务队列(macro)
 

golb1

glob1_promise

glob2_promise

//执行第一轮微任务队列(micro)
glob1_nextTick
glob2_nextTick
glob1_then
glob2_then
 


第一轮事件循环结束



//执行第二轮宏任务中的setTimeout队列(macro)
timeout1
timeout1_promise
timeout2
timeout2_promise
 


//执行第二轮宏任务setTimeout产生的微任务队列(micro)
timeout1_nextTick
timeout2_nextTick
timeout1_then
timeout2_then
 


第二轮事件循环结束
 


//执行第二轮宏任务中setImmediate队列(macro)
immediate1
immediate1_promise
immediate2
immediate2_promise

//执行第二轮宏任务setImmediate产生的微任务队列(micro)
immediate1_nextTick
immediate2_nextTick
immediate1_then
immediate2_then

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1093483.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Ubuntu22安装Docker engine(apt安装方式)

一、准备工作 新创建一个虚拟机。 进入虚拟机: 二、安装docker docker现在对用不同主机提供了不同安装包:docker engine 和 docker desktop。 docker desktop适用于图形化的桌面电脑,docker engine适用于服务器。我们这里当然是安装docker…

Mac 远程 Ubuntu

1. Iterm2 添加ssh 参考:https://www.javatang.com/archives/2021/11/29/13063392.html 2. Finder 添加远程文件管理 2.1 ubuntu 配置 安装samba sudo apt-get install samba配置 [share]path /home/USER_NAME/shared_directoryavailable yesbrowseable ye…

快速计算发票金额

快速计算发票总额 背景 在日常的工作中,我们不免需要面临费用报销问题,在进行费用报销时,我们需要提供费用相关的发票,并需要在报销单上填写相关的金额数据。这时我们将面临核对和计算发票金额的需求。 核对发票 如今&#xf…

基于和声优化的BP神经网络(分类应用) - 附代码

基于和声优化的BP神经网络(分类应用) - 附代码 文章目录 基于和声优化的BP神经网络(分类应用) - 附代码1.鸢尾花iris数据介绍2.数据集整理3.和声优化BP神经网络3.1 BP神经网络参数设置3.2 和声算法应用 4.测试结果:5.M…

STM32成熟变频逆变器方案

该方案是一款成熟的变频逆变器的方案,主要是把电源从直流到3相交流的转换,包含变频控制板,逆变主板,IO板,变频控制板主控是STM32F103VET6,配套软件。每一块板子都是原理图和PCB一一对应,并且配套…

函数调用:为什么会发生stack overflow?

在开发软件的过程中我们经常会遇到错误,如果你用 Google 搜过出错信息,那你多少应该都访问过Stack Overflow这个网站。作为全球最大的程序员问答网站,Stack Overflow 的名字来自于一个常见的报错,就是栈溢出(stack ove…

Python中图像相似性度量方法汇总

1. 引言 在当前到处充满着图像的世界里,测量和量化图像之间的相似性已经成为一项关键的任务。无论是图像检索、内容推荐还是视觉搜索,图像相似性方法在现代计算机视觉的应用中都发挥着关键的作用。 幸运的是,Python提供了大量的工具和库&am…

Zabbix监控系统系列之二十二:ESXi虚拟化监控

背景概述 此前写了一篇VMware虚拟化监控的文章,但它主要是针对vCenter Server而不是ESXi。 Zabbix监控系统系列之七:VMware虚拟化监控 本次自己家中组建HomeLab实验环境,因此我将对于ESXi单机环境的监控方式进行记录。 操作步骤 创建ESXi普…

独立式三相无源逆变电源设计

摘要 面对全球日趋严重的能源危机问题,可再生能源的开发和利用得到了人们的高度重视。其中辐射到地球太阳能资源是十分富饶的,绿色清洁的太阳能不会危害我们的生存环境,因而受到了人们的广泛利用。光伏发电作为可再生能源被广泛的应用&#x…

阿里云在云原生领域喜获多项 OSCAR 开源尖峰案例奖

当前,国内开源技术正逐渐在各领域落地,越来越多的企业已经或准备使用开源,优秀的开源案例可以起到领航和参考作用。为了更好地推动开源技术在中国市场的落地,鼓励企业和厂商使用开源,鼓励企业或个人进一步探索我国开源…

Leetcode 23.旋转排序数组

整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], nums[1], ..…

crypto:rsarsa

题目 下载压缩包后得到提示文本 根据提示文本信息&#xff0c;我们知道p q e c&#xff0c;可以求出n、φ(n)、d&#xff0c;进而求出m import gmpy2p 964842302901051567659055174001042653494573763923573980064398935203985250729849139956103500916342705037010757073363…

数据结构之堆排序和前,中,后,层序遍历,链式二叉树

首先我们要知道升序我们要建小堆&#xff0c;降序建大堆&#xff0c;这与我们的大多人直觉相违背。 因为我们大多数人认为应该将堆顶的数据输出&#xff0c;但如果这样就会导致堆顶出堆以后&#xff0c;堆结构会被破坏&#xff0c;显然我们不能这样。 所有我们反其道而行&…

anzo capital昂首资本:MT4和MT5 EA测试的主要区别

MT4和MT5EA测试仪的主要区别&#xff0c;anzo capital昂首资本认为体现在以下方面&#xff1a; 首先&#xff0c;对于专业模式的测试&#xff0c;MT4所需的时间大约为30分钟&#xff0c;MT5最多需要10分钟&#xff0c;显然MT5效率更高。 在优化方面&#xff0c;MT4对优化建议…

嵌入式养成计划-41----C++ auto--lambda表达式--C++中的数据类型转换--C++标准模板库(STL)--list--C++文件操作

九十九、auto 99.1 概念 C11引入了自动类型推导&#xff0c;和Python不一样&#xff0c;C中的自动类型推导&#xff0c;需要auto关键字来引导比如 &#xff1a;auto a 1.2; 会被编译器自动识别为 a 为 double 类型 99.2 作用 auto修饰变量&#xff0c;可以自动推导变量的数…

PyQt5开发相关

代码来源&#xff1a;cxinping/PyQt5: 《PyQt5快速开发与实战》配套代码 (github.com) 《PyQt5快速开发与实战》 (1)使用气泡提示 import sys from PyQt5.QtWidgets import QWidget, QToolTip, QApplication from PyQt5.QtGui import QFontclass Winform(QWidget):def __ini…

缺少 Google API 密钥,因此 Chromium 的部分功能将无法使用

当前版本&#xff1a;Chromium 114.0.5724.0 (开发者内部版本) &#xff08;32 位&#xff09; 1 使用 chromedriver.exe 驱动打开&#xff0c;则没有&#xff0c;于是查看参数&#xff0c;发现 --test-typewebdriver。 2 将 chrome.exe 发送到桌面&#xff0c;右键--属性--目…

零代码编程:用ChatGPT批量下载podomatic播客RSS页面音频

podomatic播客上的音频&#xff0c;怎么批量下载呢&#xff1f; 以这个播客为例&#xff1a;https://nosycrow.podomatic.com/rss2.xml 右边有一个RSS Feed的黄色图标&#xff0c;点击打开&#xff1a; 可以看到所有的音频和标题&#xff1a; 查看源代码&#xff0c;音频标题…

asp.net酒店管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net酒店管理系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言开发 asp.net 酒店管理系统1 二、功能介绍 …

2023.10.14 关于 synchronized 基本介绍

目录 synchronized 的特性 互斥 理解阻塞等待 可重入 synchronized 的使用 修饰方法 修饰代码块 synchronized 的特性 JVM 称 synchronized 为监视器锁&#xff08;monitor lock&#xff09; 互斥 synchronized 会起到互斥效果某个线程执行到某个对象的 synchronized 中…