一文搞定事件循环

同步任务、异步任务、宏任务、微任务

js任务分为同步任务和异步任务;异步任务又分为宏任务和微任务

  • 同步任务:在主线程上按顺序执行,Promise属于同步任务。
  • 异步任务:异步任务不会立即执行,它们依赖事件循环进行调度。异步任务包含宏任务和微任务,它们在特定时间点被推入各自的任务队列中等待执行。
  • 宏任务 :常见的宏任务包括:script整体代码setTimeoutsetIntervalI/O操作UI交互事件postMessageMessageChannelsetImmediate
  • 微任务 :常见的微任务包括:Promise的回调(.then.catch.finally )、MutationObserver的回调process.nextTick

js执行顺序

同步任务------》微任务------》宏任务------》微任务------》宏任务------》...

一次事件循环

  1. 执行当前宏任务:事件循环首先从宏任务队列中取出第一个任务执行。
  2. 执行所有微任务:当前宏任务执行完毕后,事件循环会检查微任务队列,事件循环会一次执行队列中所有微任务,知道微任务队列清空。
  3. 渲染UI(如果需要):在浏览器环境中,一旦微任务队列清空,浏览器会检查是否需要执行UI渲染。通常,浏览器的UI渲染会在执行完所有微任务之后,下一个宏任务开始之前进行。
  4. 继续下一个宏任务:完成当前宏任务、所有微任务以及可能的UI渲染之后,事件循环会回到第一步,从宏任务队列中取出下一个任务,开始新一轮的执行。

实践

js 复制代码
;(() => {
	console.log(1)
	setTimeout(() => {
		console.log('setTimeout 1')

		Promise.resolve().then(() => {
			console.log('promise 1')
		})
	})
	setTimeout(() => {
		console.log('setTimeout 2')
		Promise.resolve().then(() => {
			console.log('promise 2')
		})
	})

	Promise.resolve().then(() => {
		console.log('promise 3')
		Promise.resolve().then(() => {
			console.log('promise 4')
		})
	})

	Promise.resolve().then(() => {
		console.log('promise 5')
		Promise.resolve().then(() => {
			console.log('promise 6')
		})
	})
	console.log(7)
})()

执行步骤解析

  1. javascript整体代码注册了一个宏任务,放入宏任务队列
  2. 此时执行栈/主线程空闲,事件循环从宏任务队列中取出一个宏任务执行。
  3. console.log(1)为同步任务,会立即执行,输出1
  4. setTimeout(() => { console.log('setTimeout 1') Promise.resolve().then(() => { console.log('promise 1') }) })注册一个宏任务,放入宏任务队列
  5. setTimeout(() => { console.log('setTimeout 2') Promise.resolve().then(() => { console.log('promise 2') }) })注册一个宏任务,放入宏任务队列
  6. Promise.resolve().then(() => { console.log('promise 3') Promise.resolve().then(() => { console.log('promise 4') }) })注册一个微任务,放入微任务队列
  7. Promise.resolve().then(() => { console.log('promise 5') Promise.resolve().then(() => { console.log('promise 6') }) })注册一个微任务,放入微任务队列
  8. console.log(7)为同步任务,立即执行,输出7
  9. 主线程空闲,检查微任务队列,取出一个微任务Promise.resolve().then(() => { console.log('promise 3') Promise.resolve().then(() => { console.log('promise 4') }) })执行then回调,输出promise 3
  10. Promise.resolve().then(() => { console.log('promise 4') })注册一个微任务,放入微任务队列队尾。
  11. 取出下一个微任务Promise.resolve().then(() => { console.log('promise 5') Promise.resolve().then(() => { console.log('promise 6') }) })执行then回调,输出promise 5
  12. Promise.resolve().then(() => { console.log('promise 6') })注册一个微任务,放入微任务队列队尾。
  13. 取出下一个微任务Promise.resolve().then(() => { console.log('promise 4') })执行then回调,输出promise 4
  14. 取出下一个微任务Promise.resolve().then(() => { console.log('promise 6') })执行then回调,输出promise 6
  15. 此时微任务队列清空,无UI渲染需求,开启下一轮事件循环,执行下一个宏任务。取出一个宏任务setTimeout(() => { console.log('setTimeout 1') Promise.resolve().then(() => { console.log('promise 1') }) })输出setTimeout 1
  16. Promise.resolve().then(() => { console.log('promise 1') })注册一个微任务,放入微任务队列
  17. 检查微任务队列,取出一个微任务Promise.resolve().then(() => { console.log('promise 1') })执行then回调,输出promise 1
  18. 此时微任务队列清空,无UI渲染需求,开启下一轮事件循环,执行下一个宏任务。取出一个宏任务setTimeout(() => { console.log('setTimeout 2') Promise.resolve().then(() => { console.log('promise 2') }) })输出setTimeout 2
  19. Promise.resolve().then(() => { console.log('promise 2') })注册一个微任务,放入微任务队列
  20. 检查微任务队列,取出一个微任务Promise.resolve().then(() => { console.log('promise 2') })执行then回调,输出promise 2
  21. 此时微任务队列清空,宏任务队列也清空,所有任务执行完毕。

输出结果为

arduino 复制代码
1
7
promise 3
promise 5
promise 4
promise 6
setTimeout 1
promise 1
setTimeout 2
promise 2
相关推荐
姜 萌@cnblogs24 分钟前
Saga Reader 0.9.9 版本亮点:深入解析核心新功能实现
前端·ai·rust
gnip32 分钟前
实现elementplus官网主题切换特效
前端·css
Darling02zjh34 分钟前
HTML5
前端·html·html5
成长ing121381 小时前
闪白效果
前端·cocos creator
Lazy_zheng1 小时前
React架构深度解析:从 Stack 到 Fiber,解决 CPU 和 I/O 瓶颈问题
前端·react.js·前端框架
张元清1 小时前
什么是React并发模式中的Tearing(撕裂)
前端·面试
AndyLaw1 小时前
统计字符数错一半,我被 length 坑了两次
前端·javascript
关羽的小刀1 小时前
Element-UI最新版暗藏Lodash漏洞?一次真实项目安全排查记录
前端
张志鹏PHP全栈1 小时前
Vue3第五天,ref 和 reactive的介绍和区别
前端·vue.js
郭邯1 小时前
import.meta对象是什么?
前端