异步 JavaScript 之理解 macrotask 和 microtask(转)

这个知识点。。。

https://blog.keifergu.me/2017/03/23/difference-between-javascript-macrotask-and-microtask/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

前端基础进阶系列

这个系统也超屌!!

http://www.jianshu.com/p/cd3fee40ef59

=======================

Macrotask 和 microtask 都是属于上述的异步任务中的一种,我们先看一下他们分别是哪些 API :

  • macrotaskssetTimeoutsetIntervalsetImmediate, I/O, UI rendering
  • microtasksprocess.nextTickPromisesObject.observe(废弃), MutationObserver

任务队列分为 macrotasks 和 microtasks,而Promise中的then方法的函数会被推入 microtasks 队列,而setTimeout的任务会被推入 macrotasks 队列。在每一次事件循环中,macrotask 只会提取一个执行,而 microtask 会一直提取,直到 microtasks 队列清空

注:一般情况下,macrotask queues 我们会直接称为 task queues,只有 microtask queues 才会特别指明。

那么也就是说如果我的某个 microtask 任务又推入了一个任务进入 microtasks 队列,那么在主线程完成该任务之后,仍然会继续运行 microtasks 任务直到任务队列耗尽。

而事件循环每次只会入栈一个 macrotask ,主线程执行完该任务后又会先检查 microtasks 队列并完成里面的所有任务后再执行 macrotask。

=======================

测试代码:

<script>
    console.log(‘script start‘);
    setTimeout(function() {
        console.log(‘setTimeout‘);
    },0);

    Promise.resolve().then(function() {
        console.log(‘promise‘);
    }).then(function() {
    console.log(‘promise2‘);
});

console.log(‘script end‘);

</script>

时间: 2024-09-30 14:59:16

异步 JavaScript 之理解 macrotask 和 microtask(转)的相关文章

【JavaScript】理解与使用Javascript中的回调函数

在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被“存储”在变量中,能作为函数参数被传递,能在函数中被创建,能从函数中返回. 因为函数是第一类对象,我们可以在Javascript使用回调函数.在下面的文章中,我们将学到关于回调函数的方方面面.回调函数可能是在Javascript中使用最多的函数式编程技巧,虽然在字面上看起来它们一直一小段Javascript或者jQuery代码,但是对于许多开发者来说它任然是一个谜.在阅读本文

同步机制与异步机制的理解

同步机制与异步机制的理解 同步机制即在进行输入输出时,必须等待输入输出完毕后,才能进行后面的操作. 异步传输机制就不必等待完毕就可进行其它操作. 网络上有一个比较通俗的例子:请吃饭 同步就是我叫你吃饭,你听到了就立刻跟我去,若你没有反应,那我就不停的叫你,直到你回应.(同步的特点是我不能做其他任何的事情,专心等你...个人觉得女生肯定希望遇到此类的男生吧...) 异步就是我叫了你,然后我就去吃饭了,不管你听没听见.(异步的特点是不会等待正在执行的事件结束,他就可以执行其它的事件). 看了别人的帖

白龙卫士+异步消息的理解

白龙卫士+异步消息的理解 手机卫士 MobileSafe MobileSafe 1.0 Splash界面的(设置一个渐变动画) 只加载计入界面,–>主页 根据功能模块划分 Activity com.itheima.mobilesafe.activty 后台服务 com.itheima.mobilesafe.service 广播接受者 com.itheima.mobilesafe.receiver 数据库 com.itheima.mobilesafe.db.dao 对象(java bean) co

javascript深入理解js闭包(看了挺多的,感觉这篇比较透彻)

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

JavaScript中的异步 macrotask 和 microtask

看过很多setTimeout.Promise执行顺序的面试题,一直不明白为啥都是异步操作,Promise就牛×些呢?直到了解了macrotask和micromask才恍然大悟... 先来一道面试题助助兴: setTimeout(()=>{ console.log('A'); },0); var obj={ func: function () { setTimeout(function () { console.log('B') },0); return new Promise(function

异步JavaScript与Promise

异步? 我在很多地方都看到过 异步(Asynchronous)这个词,但在我还不是很理解这个概念的时候,却发现自己常常会被当做"已经很清楚"(* ̄? ̄). 如果你也有类似的情况,没关系,搜索一下这个词,就可以得到大致的说明.在这里,我会对JavaScript的异步做一点额外解释. 看一下这段代码: JavaScript代码 var start = new Date(); setTimeout(function(){ var end = new Date(); console.log(&

JavaScript ——闭包理解

昨天晚上听别人谈起闭包这个东西,虽然对js有一点了解但却丝毫没有印象,今天也没什么事就顺便研究了一下满足好奇宝宝.整合于网上的理解,记录一下. 一.闭包的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 全局作用域 局部作用域 :一个 function 形成一个独立的作用域, 而且方法作用域还能够嵌套. 与别的语言不同的是: 花括号({})不能形成一个独立的作用域, 例如Java中的作用域. 下面我们举例说说作用域 1 var m = 1; 2 function f(){

ajax同步、异步执行简单理解与证明

此理解范例代码来自前几篇随笔! 重在实际操作练习一下!!!!! 在$.ajax()中我们可以常常看到async,这就是来指定ajax同步异步的,需要记忆一下: 记忆方法: sync英语中的意思是:“同步”.“同步的”.“同步处理” 前面加个“a”,构成async英文中的意思是:“异步” 再者给他指定true和false那就容易理解了: “async:true” 意思是:“异步” “async:false” 意思是:“同步” 分析async作用: 当“async:true”时,也就是异步执行aja

关于generator异步编程的理解以及如何动手写一个co模块

generator出现之前,想要实现对异步队列中任务的流程控制,大概有这么一下几种方式: 回调函数 事件监听 发布/订阅 promise对象 第一种方式想必大家是最常见的,其代码组织方式如下: function fn(url, callback){ var httpRequest; //创建XHR httpRequest = window.XMLHttpRequest ? new XMLHttpRequest() : window.ActiveXObject ? new ActiveXObjec