JS MarcoTasks MicroTasks
JS MarcoTasks MicroTasks
在JS的event loop
中,有两种任务队列microtasks
和macrotasks
microtasks
- process.nextTick
- Promise
- Object.observe
- MutationObserver
macrotasks
- setTimeout
- setInterval
- setImmediate
- I/O(Ajax, fs)
- UI渲染
在一个事件循环event loop的周期中,一个task应该从macrotask队列开始执行。当这个macrotask结束后,所有的microtasks将在同一个cycle中执行。
且在microtasks执行时还可以加入更多的microtask,然后一个一个的执行,直到microtask队列清空。
console.log('start')
const interval = setInterval(() => {
console.log('setInterval')
}, 0)
setTimeout(() => {
console.log('setTimeout 1')
Promise.resolve()
.then(() => {
console.log('promise 3')
})
.then(() => {
console.log('promise 4')
})
.then(() => {
setTimeout(() => {
console.log('setTimeout 2')
Promise.resolve()
.then(() => {
console.log('promise 5')
})
.then(() => {
console.log('promise 6')
})
.then(() => {
clearInterval(interval)
})
}, 0)
})
}, 0)
Promise.resolve()
.then(() => {
console.log('promise 1')
})
.then(() => {
console.log('promise 2')
})
event loop1:
macrotasks: [主程序代码]
microtasks: []
执行macrotasks队列,也即执行主程序代码,收集macro或micro的tasks
输出: 'start'
收集的macrotasks(下次循环的): [setInterval, setTimeout]
收集的microtasks(当前循环的): [Promise]
macrotasks队列执行完毕,这时候microtasks: [Promise]不为空,执行microtasks队列
输出: 'promise1'
输出 : 'promise2'
这时候microtasks为空
下次循环开始之前的队列状态
macrotasks: [setInterval, setTimeout]
microtasks: []
event loop2:
执行macrotasks队列
执行setInterval
输出:'setInterval',且收集setInterval到下次循环的macrotasks中
执行setTimeout
输出:'setTimeout 1',且收集Promise到当前循环的microtasks: [Promise]
由于当前循环的microtasks不为空,执行队列中的任务Promise
输出:'promise3'
输出: 'promise4'
收集setTimeout到下次循环的macrotasks中
这时候microtasks为空
下次循环开始之前的队列状态
macrotasks: [setInterval, setTimeout]
microtasks: []
event loop3:
执行macrotasks队列
执行setInterval
输出: 'setInterval',且收集setInterval到下次循环的macrotasks: [setInterval]中
执行setTimeout
输出: 'setTimeout2',且收集Promise到当前的microtasks: [Promise]
由于当前循环的microtasks不为空,执行队列中的任务Promise
输出: 'promise5'
输出: 'promise6'
清除定时器clearInterval,所以下次循环的macrotasks的setInterval被清除
下次循环开始之前的队列状态
macrotasks: []
microtasks: []
event loop4:
由于macrotasks为空,和microtasks为空,程序处于等待状态。
上面程序总的输出结果是
// event loop1
start
promise 1
promise 2
// event loop2
setInterval
setTimeout 1
promise 3
promise 4
// event loop3
setInterval
setTimeout 2
promise 5
promise 6
总结
- 一个循环开始的时候microtasks(大多情况)是空的,或者说当前循环的microtasks一开始是空的,在macrotasks执行完后可能不为空
- microtasks要等到macrotasks队列执行完毕才会开始执行,且microtasks的任务在执行的过程中,是可以添加任务的,只要当前循环还未结束
- 在当前循环中收集的macro任务是收集到下一个循环的macrotasks,而当前循环收集的micro任务是收集到当前microtasks中
JS MarcoTasks MicroTasks的更多相关文章
- 浅析Node.js的Event Loop
目录 浅析Node.js的Event Loop 引出问题 Node.js的基本架构 Libuv Event Loop Event Loop Phases Overview Poll Phase The ...
- js事件循环机制 (Event Loop)
一.JavaScript是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决 ...
- 定时器setTimeout()和Node.js的Event Loop
一.定时器 setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行.它在"任务队列"的尾部添加一个事件,因此要等到同步任务和 ...
- JavaScript:再谈Tasks和Microtasks
JavaScript是单线程,也就是说JS的堆栈中只允许有一类任务在执行,不可以同时执行多类任务.在读js文件时,所有的同步任务是一条task,当然了,每一条task都是一个队列,按顺序执行.而如果在 ...
- $nextTick 宏任务 微任务 macrotasks microtasks
1.nextTick调用方法 首先看nextTick的调用方法: https://cn.vuejs.org/v2/api/#Vue-nextTick // 修改数据 vm.msg = 'Hello' ...
- js经典试题之ES6
js经典试题之ES6 1:在ECMAScript6 中,Promise的状态 答案:pending resolved(fulfilled) rejected 解析: Promise对象只有三种状态: ...
- 优化js的执行
避免使用setTimeout和setInterval进行视觉更新操作;使用 requestAnimationFrame. 将长时间运行的JavaScript 从主线程转移到 Web Workers. ...
- event loop js事件循环 microtask macrotask
转: 原文 http://blog.csdn.net/sjn0503/article/details/76087631 ---------------------------------------- ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
随机推荐
- java程序生成二维码
在物联网的时代,二维码是个很重要的东西了,现在无论什么东西都要搞个二维码标志,唯恐落伍,就差人没有用二维码识别了.也许有一天生分证或者户口本都会用二维码识别了.今天心血来潮,看见别人都为自己的博客添加 ...
- [Leetcode]009.Palindrome Number
public class Solution { public boolean isPalindrome(int x) { if (x<0 || (x!=0 && x%10==0) ...
- java日期与时间戳相互转换大全
转载大神 https://blog.csdn.net/djc777/article/details/50904989/
- maven插件: shade, assembly
shade插件的作用: 通过版本的exclution无法解决jar冲突的问题, 解决方案是把依赖的包打到本model的jar中,打包的时候由mvn plugin自动修改代码中的依赖jar包名 relo ...
- 转 xshell 图像化展示
http://www.cnblogs.com/kellyseeme/p/7965830.html 限制: 无法显示通过堡垒机登录的机器的图形接界面. 只能显示直接登录的服务到期的图像化界面 Xshel ...
- powerdesigner添加唯一约束
假设我们有一个user表,字段为ID和NAME,现在ID作为逻辑主键,自增,想将NAME添加唯一约束,话不多说直接上图: # 添加一个key, 名字随便取,我取为key_u # 双击添加的key的第一 ...
- Sqoop概述
sqoop Sqoop 是传统数据库与 Hadoop 之间数据同步的工具,它是 Hadoop 发展到一定程度的必然产物,它主要解决的是传统数据库和Hadoop之间数据的迁移问题.这节课我们将详细介绍 ...
- mybatis持久化操作“无效的类型111解决”
mybatis持久化操作时,如果插入数据为null的情况下,由于内部机制问题,会导致报错,导致出现:“无效的类型:1111”示例如下: org.springframework.jdbc.Uncateg ...
- 前端专业术语: shim 和 Polyfill,了解下
在学习和使用 JavaScript 的时候,我们会经常碰到两个术语:shim 和 polyfill.它们有许多定义和解释,意思相近又有差异. Shim Shim 指的是在一个旧的环境中模拟出一个新 A ...
- 日常bug整理--xxtz
2017-12-12 建SQLite数据库表时,遇到外键关联报错:foreign key mismatch 解决:发现是个粗心问题,关联的外键没有作为主键,原因是关联的外键由INT改为varchar字 ...