前端 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


目录
相关文章
|
11天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
11天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
17 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
16天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
22 1
|
15天前
|
JavaScript 前端开发 开发者
JavaScript的事件循环
【10月更文挑战第27天】理解JavaScript的事件循环机制对于正确编写和理解JavaScript中的异步代码至关重要,它是JavaScript能够高效处理各种异步任务的关键所在。
29 1
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
96 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
122 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
81 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
73 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
93 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
84 3