macrotask和microtask

标签: macrotask和microtask
8人阅读 评论(0) 收藏 举报
分类:

事件循环的机制
步骤1)执行macrotask 队列中最早的那个任务 task ,然后移出;
步骤2)执行 microtask 队列中所有可用的任务,然后移出;
上面两个的步骤是一个事件循环,重复以上步骤实现事件循环。

范围所属
macrotasks: 代码块、setTimeout、setInterval、setImmediate、I/O、UI渲染;
microtasks: process.nextTick、Promise、 Object.observe、 MutationObserver。

执行顺序
macrotasks:代码块、I/O、UI渲染在当前事件循环中执行;setTimeout、setInterval、setImmediate在设定时间后,插入任务队列,并不在当前事件循环中。
microtasks执行优先级:process.nextTick 先于 Promise.then执行。

以下代码给出了执行顺序:

process.nextTick(function(){
  console.log("nt1");//执行顺序3
})
setTimeout(function(){
  console.log('st');//执行顺序6
},0)
new Promise(function(resolve){
  console.log("promise_s");//执行顺序1
  resolve();
}).then(function(resolve){
  console.log("promise_call");//执行顺序5
})
process.nextTick(function(){
  console.log("nt2");//执行顺序4
})
console.log('end');//执行顺序2

//结果输出:"promise_s" > "end"  > "nt1" > "nt2" > "promise_call" > "st"
查看评论

透明位图

Ron GeryMicrosoft 网络开发技术小组摘要这篇文章讨论了在 Microsoft Windows 图形环境中用位图达到透明和屏蔽效果的几种方法,包括通过仿真和使用特殊的驱动器功能。包含其中...
  • ghj1976
  • ghj1976
  • 2000-11-21 10:07:00
  • 1935

event loop js事件循环 microtask macrotask

首先知晓: js是单线程语言 也就是说一次就只能做一件事情。 多数的网站不需要大量计算,程序花费的时间主要集中在磁盘 I/O 和网络 I/O 上面 虽然SSD读取很快,但和CPU处理指...
  • sjn0503
  • sjn0503
  • 2017-07-26 10:46:11
  • 3435

Microtasks队列

在进一步学习到promise的时候,发现当初认识的太浅,原来还存在Micritasks这东西。 基本macrotasks == task != microtasks执行他们可以简单的总结为: 首先把t...
  • github_36978270
  • github_36978270
  • 2017-03-05 08:20:47
  • 342

javascript中的marotask与microtask

setTimeout(function(){ console.log('定时器开始啦') }); new Promise(function(resolve){ console....
  • zgrbsbf
  • zgrbsbf
  • 2018-01-21 09:57:40
  • 97

eventloop杂谈

JavaScript 语言特点 单线程,而这个线程中拥有唯一的一个事件循环。(web worker 这里不参与讨论) 代码的执行过程中,除了依靠函数调用栈来搞定函数的执行顺序外,还依靠任务队列(t...
  • github_36369819
  • github_36369819
  • 2018-03-19 00:24:33
  • 12

关于Vue中nextTick()的思考

我的项目中有一个swiper插件,在vue实例created(生命周期相关)函数中,先用ajax异步加载数据,再初始化swiper轮播插件时,遇到了一个问题,由于动态数据加载导致了swiper初始化后...
  • sinat_31231955
  • sinat_31231955
  • 2017-10-27 16:55:53
  • 360

js事件循环机制(二)

前言 上一篇介绍了 事件循环 的基础, 这一篇主要介绍 macrotask 和 microtask。 一、引入 (function test() { setTim...
  • joe51392010
  • joe51392010
  • 2018-02-04 10:58:59
  • 53

从Promise来看JavaScript中的Event Loop、Tasks和Microtasks

前几天面试的时候,碰到了这样一个题:说出下列代码的执行结果:setTimeout(function () { console.log(1) }, 0);new Promise(function...
  • WKY_CSDN
  • WKY_CSDN
  • 2017-08-22 14:20:59
  • 525

Vue.js源码解析(八)【Vue.js异步更新DOM策略及nextTick】

操作DOM 在使用vue.js的时候,有时候因为一些特定的业务场景,不得不去操作DOM,比如这样: template> div> div ref="test">{{test}}di...
  • WuLex
  • WuLex
  • 2017-11-18 21:19:01
  • 181

Callback Promise Generator Async-Await 和异常处理的演进_0

根据笔者的项目经验,本文讲解了从函数回调,到 es7 规范的异常处理方式。异常处理的优雅性随着规范的进步越来越高,不要害怕使用 try catch,不能回避异常处理。 我们需要一个健全的架构捕获...
  • amm28824
  • amm28824
  • 2017-02-05 09:24:02
  • 483
    个人资料
    持之以恒
    等级:
    访问量: 6万+
    积分: 868
    排名: 5万+
    博客专栏
    最新评论