前端 JS 经典:宏任务、微任务、事件循环(EventLoop)

1. 前言概览

js 是一门单线程的非阻塞的脚本语言

单线程:只有一个主线程处理所有任务

非阻塞:有异步任务,主线程挂起这个任务,等异步返回结果再根据一定规则执行

2. 宏任务与微任务

javascript 复制代码
都是异步任务

宏任务:script 标签,setTimeout,setInterval,setImmediate,I/O,接口调用
微任务:process.nextTick,Promise.then() catch(),Async/Await,Object.observe

注意:Promise 本身是同步任务,then,catch,finally 是异步任务
async 中 await 右边代码是同步任务,之后代码是异步任务

3. 事件循环

主线程执行顺序:一个宏任务(script 标签)-> 同步任务 -> 微任务 -> 一个宏任务 -> 宏任务中的微任务(如果有) -> 下一个宏任务 -> ..... 直到 js 事件执行完成。

4. 经典案例

javascript 复制代码
async function async1(){
  console.log('1') // 同2
  await async2()
  console.log('2') // 微1
}
async function async2(){
  console.log('3') // 同3
}
console.log('4') // 同1
setTimeout(function(){
  console.log('5') // 宏1
},0)
setTimeout(function(){
  console.log('6') // 宏2
},3)
async1();
new Promise(function(resolve){
  console.log('7') // 同4
  resolve();
  console.log('8') // 同5
}).then(function(){
  console.log('9') // 微2
})
console.log('10') // 同6
// 输出:4,1,3,7,8,10,2,9,5,6
相关推荐
栈老师不回家5 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
芊寻(嵌入式)6 分钟前
C转C++学习笔记--基础知识摘录总结
开发语言·c++·笔记·学习
前端啊龙11 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠15 分钟前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
有梦想的咸鱼_17 分钟前
go实现并发安全hashtable 拉链法
开发语言·golang·哈希算法
海阔天空_201322 分钟前
Python pyautogui库:自动化操作的强大工具
运维·开发语言·python·青少年编程·自动化
天下皆白_唯我独黑29 分钟前
php 使用qrcode制作二维码图片
开发语言·php
夜雨翦春韭33 分钟前
Java中的动态代理
java·开发语言·aop·动态代理
小远yyds35 分钟前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
何曾参静谧1 小时前
「C/C++」C/C++ 之 变量作用域详解
c语言·开发语言·c++