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

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

1. 前言概览

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

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

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

2. 宏任务与微任务

都是异步任务
 
宏任务: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. 经典案例

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


目录
相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
626 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
11月前
|
JavaScript 前端开发 API
|
11月前
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
408 8
|
12月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
11422 23
|
移动开发 JavaScript 前端开发
JavaScript之彻底理解EventLoop
JavaScript之彻底理解EventLoop
269 0
JavaScript之彻底理解EventLoop
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
359 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
283 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
173 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
501 5
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的家政平台附带文章源码部署视频讲解等
340 4