浏览器的微任务MicroTask和宏任务MacroTask

v1 发布于2019-08-23 17:15 / 2914人阅读

摘要：简介我把在浏览器中运行主要分为以下几种类型的任务同步任务同步任务是指按照正常顺序执行的代码，比如函数调用，数值运算等等，只要是执行后立即能够得到结果的就是同步任务。取出微任务队列中的任务执行，直到队列被完全清空重复和，直到宏任务队列被清空。

简介

我把JavaScript在浏览器中运行主要分为以下几种类型的任务：

同步任务（MainTask）：同步任务是指JavaScript按照正常顺序执行的代码，比如：函数调用，数值运算等等，只要是执行后立即能够得到结果的就是同步任务。

宏任务（MacroTask）：setTimeout、setInterval、I/O、UI渲染

微任务（MicroTask）：Promise、Object.obsever、MutationObsever

用户交互事件（User Interaction Event）：点击事件onclick、键盘事件onkeywodn、鼠标事件onmouseover等等

执行顺序

具体流程：

执行完主逻辑中的同步任务

取出微任务队列（MicroTask Queue）中的任务执行，直到队列被完全清空

取出宏任务队列（MacroTask Queue）中的一个任务执行。

取出微任务队列（MicroTask Queue）中的任务执行，直到队列被完全清空

重复 3 和 4，直到宏任务队列（MacroTask Queue）被清空。

demo1：宏任务(MacroTask)和微任务(MicroTask)执行顺序

demo1.html




    
    demo1：宏任务(MacroTask)和微任务(MicroTask)执行顺序

运行结果：

以上代码详细的运行步骤队列图，我已经写成了PPT，大家可以下载打开看效果，可以详细了解每一段代码在队列中的样子：

https://github.com/Jameswain/...

demo2：setInterval —— setTimeout的语法糖

setInterval其实可以说是setTimeout的语法糖，因为setInterval能够实现的功能，setTimeout也能实现，下面通过一个小例子实现使用setTimeout实现setInterval的定时调度功能：

function logic() {
    console.log(Date.now());
    setTimeout(logic, 1000);
}
logic();

demo3：setInterval宏任务和微任务深入




    
    demo1：setTimeout与setInterval


    demo

运行结果：

从运行结果可以发现，JavaScript的代码在浏览器中的执行顺序是【同步任务】 => 【清空微任务队列】=>【宏任务】=> 【清空微任务队列】，如果在执行微任务时，又发现了微任务，它会把这个微任务放入到微任务队列的末尾。宏任务也一样，如果在执行宏任务的时候发现了宏任务，它也会把这个宏任务放入宏任务队列的末尾。

上代码详细的运行步骤队列图，我已经写成了PPT，大家可以下载打开看效果，可以详细了解每一段代码在队列中的样子：

https://github.com/Jameswain/...

参考文档：

Tasks, microtasks, queues 和 schedules

Tasks, microtasks, queues and schedules

浏览器和Node不同的事件循环（Event Loop）

idc机房托管私有云定时任务与触发任务工作流任务和节点任务任务池任务堆栈

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104063.html

【Vue源码】Vue中DOM的异步更新策略以及nextTick机制

摘要：本篇文章主要是对中的异步更新策略和机制的解析，需要读者有一定的使用经验并且熟悉掌握事件循环模型。这个结果足以说明中的更新并非同步。二是把回调函数放入一个队列，等待适当的时机执行。通过的主动来触发的事件，进而把回调函数作为参与事件循环。本篇文章主要是对Vue中的DOM异步更新策略和nextTick机制的解析，需要读者有一定的Vue使用经验并且熟悉掌握JavaScript事件循环模型。 ...

selfimpr 2019-08-26 11:46 评论0 收藏0
Eventloop不可怕，可怕的是遇上Promise

摘要：就是每次传入的函数最后是的任务之后，开始执行，可以看到此时会批量执行中的函数，而且还给这些中回调函数放入了一个这个很显眼的函数之中，表示这些回调函数是在微任务中执行的。下一模块会对此微任务中的插队行为进行详解。有关Eventloop+Promise的面试题大约分以下几个版本——得心应手版、游刃有余版、炉火纯青版、登峰造极版和究极变态版。假设小伙伴们战到最后一题，以后遇到此类问题，都是...

olle 2019-08-23 16:28 评论0 收藏0
JavaScript执行机制

摘要：事件循环事件循环是实现异步的一种方法，也是的执行机制。最后的最后是一门单线程语言是的执行机制部分内容转自 1.单线程 javascript是一门单线程语言 2.javascript事件循环同步任务异步任务 showImg(https://segmentfault.com/img/bVbufUd?w=1268&h=1062);除了广义的同步任务和异步任务，我们对任务有更精细的定义...

ralap 2019-08-23 18:17 评论0 收藏0
带你彻底弄懂Event Loop

前言我在学习浏览器和NodeJS的Event Loop时看了大量的文章，那些文章都写的很好，但是往往是每篇文章有那么几个关键的点，很多篇文章凑在一起综合来看，才可以对这些概念有较为深入的理解。于是，我在看了大量文章之后，想要写这么一篇博客，不采用官方的描述，结合自己的理解以及示例代码，用最通俗的语言表达出来。希望大家可以通过这篇文章，了解到Event Loop到底是一种什么机制，浏览器和Nod...

hersion 2019-08-23 11:44 评论0 收藏0