宏任务与微任务:

异步任务分为宏任务（macrotask）与微任务 (microtask)，不同的API注册的任务会依次进入自身对应的队列中，然后等待 Event Loop 将它们依次压入执行栈中执行。

宏任务(macrotask)：script(整体代码)、setTimeout、setInterval、UI 渲染、 I/O、postMessage、 MessageChannel、setImmediate(Node.js 环境)
微任务(microtask)：Promise、 MutaionObserver、process.nextTick(Node.js环境）

Event Loop(事件循环)：

Event Loop(事件循环)中，每一次循环称为 tick, 每一次tick的任务如下：

执行栈选择最先进入队列的宏任务(通常是script整体代码)，如果有则执行
检查是否存在微任务 (microtask)，如果存在则不停的执行，直至清空微任务 (microtask) 队列
更新render(每一次事件循环，浏览器都可能会去更新渲染)
重复以上步骤形成循环
宏任务 > 所有微任务 > 宏任务

代码实例

setTimeout(function () {console.log(1);
});new Promise(function (resolve, reject) {console.log(2)resolve(3)
}).then(function (val) {console.log(val);
})console.log(4);

执行讲解

先执行script同步代码：执行new Promise中的console.log(2),then后面的不执行属于微任务
然后执行console.log(4)
执行完script宏任务后，执行微任务，console.log(3)，没有其他微任务了
执行另一个宏任务，定时器，console.log(1)

结果：2=>4=>3=>1

一分钟搞懂js事件循环相关推荐

彻底搞懂JS事件循环机制（event loop）
知识点: js异步实现 EventLoop.消息队列宏任务与微任务同步模式与异步模式首先要确定 js是单线程语言,js在设计之初用作用户互动,以及操作DOM.这决定了它只能是单线程(例如多线 ...
js异步等待完成后再进行下一步操作_彻底搞懂JS事件中的循环机制 Event Loop
我们都知道JavaScript是单线程语言,就是因为单线程的特性,就不得不提js中的同步和异步一.同步和异步所谓单线程,无非就是同步队列和异步队列,js代码是自上向下执行的,在主线程中立即执行的就 ...
JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...
看聊天记录都学不会C语言？太菜了吧》（17）5分钟搞懂指针与多重指针
若是大一学子或者是真心想学习刚入门的小伙伴可以私聊我,若你是真心学习可以送你书籍,指导你学习,给予你目标方向的学习路线,无套路,博客为证. 本系列文章将会以通俗易懂的对话方式进行教学,对话中将涵盖了新 ...
5分钟搞懂用户态,内核态
5分钟搞懂用户态,内核态 1. 什么是用户态,内核态用户态就是提供应用程序运行的空间,为了使应用程序访问到内核管理的资源例如CPU,内存,I/O.内核必须提供一组通用的访问接口,这些接口就叫系统调用 ...
微信小程序从入坑到放弃二十九：一个小场景搞懂冒泡事件bindtap和catchtap的区别
摘要: 在微信小程序中,bindtap事件会产生冒泡,若不加以拦截,会一直冒泡到顶端.在某些情况下,一次点击会触发若干点击事件.为了防止冒泡,使用catchtap即可解决问题.在有全屏半透明背景的弹出 ...
Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
mysql decimal型转化为float_5分钟搞懂MySQL数据类型之数值型DECIMAL类型
速成指南 5分钟搞懂MySQL数据类型之数值型--DECIMAL类型 DECIMAL类型的语法:DECIMAL[(M[,D])] [UNSIGNED] [ZEROFILL].其中M指定的是数字的总位 ...
彻底搞懂 JS 中 this 机制
彻底搞懂 JS 中 this 机制摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

一分钟搞懂js事件循环

宏任务与微任务:

Event Loop(事件循环)：

代码实例

一分钟搞懂js事件循环相关推荐

最新文章

热门文章