异步 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-10-24 17:33:06

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

Promise &amp; Generator——幸福地用同步方法写异步JavaScript

最近在写一个自己的网站的时候(可以观摩一下~Colors),在无意识中用callback写了一段嵌套了5重回调函数的可怕的代码.回过神来的时候被自己吓了一跳,这可不行啊,丑得没法看啊!于是打算尝试一下一些流行的异步的解决方案.经过一番折腾之后...我终于找到了一个令自己满意的方案了(爱不释手).不过在正式介绍它之前先扯一些其他的相关知识先吧! 1. JavaScript异步解决方案有哪一些 其实异步JavaScript已经不是什么高级的东西了,Nodejs的出现,特别是callback hell

Javascript - 全面理解 caller,callee,call,apply_基础知识

Javascript - 全面理解 caller,callee,call,apply Author: BlueDestiny, never-online From: http://www.never-online.net, Blog.csdn.net/BlueDestiny 1.caller JScript参考中说明为:返回一个对函数的引用,该函数调用了当前函数. 如何理解这句话, 先来举个简单的例子: // caller demo { function callerDemo() { if (c

javascript深入理解js闭包_javascript技巧

一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

javascript的理解及经典案例分析_javascript技巧

js的简介: JavaScript是一种能让你的网页更加生动活泼的程式语言,也是目前网页中设计中最容易学又最方便的语言. 你可以利用JavaScript轻易的做出亲切的欢迎讯息.漂亮的数字钟.有广告效果的跑马灯及简易的选举,还可以显示浏览器停留的时间.让这些特殊效果提高网页的可观性. javascript现在可以再网页上做很多很多事情,网页特效,操作dom,html5游戏(基于html5和JavaScript的结合),动画等等特效,还可以实现拉去后台数据(通过ajax),不仅可以做前台还可以做后

使用 Chrome 开发工具调试异步 JavaScript(Debugging Asynchronous JavaScript with Chrome DevTools)

使用 Chrome 开发工具调试异步 JavaScript 太阳火神的美丽人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商业用途-保持一致"创作公用协议 转载请保留此句:太阳火神的美丽人生 -  本博客专注于 敏捷开发及移动和物联设备研究:iOS.Android.Html5.Arduino.pcDuino,否则,出自本博客的文章拒绝转载或再转载,谢谢合作. 终于又发现一个值得研究的领域,一头雾水,继续研究,估计研究明白了,也就能翻译明白了,也

异步JavaScript编程中的Promise使用方法_node.js

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

PHP-Socket-阻塞与非阻塞,同步与异步概念的理解

1. 概念理解        在进行网络编程时,我们常常见到同步(Sync)/异步(Async),阻塞(Block)/非阻塞(Unblock)四种调用方式:同步:       所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.也就是必须一件一件事做,等前一件做完了才能做下一件事.       例如普通B/S模式(同步):提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事   异步:       异步的概念和同步相对.当一个异步过程调用发出后,调用

异步javascript的原理和实现技巧介绍_javascript技巧

因为工作的需要,我要在网页端编写一段脚本,把数据通过网页批量提交到系统中去.所以我就想到了Greasemonkey插件,于是就开始动手写,发现问题解决得很顺利.但是在对脚本进行总结和整理的时候,我习惯性地问了自己一个问题:能不能再简单点? 我的答案当然是"能". 首先回顾我的数据批量提交的需求:我有一批用户数据要插入到系统中,但是因为系统库表结构不是行列式的,所以无法转化为sql语句插入.要插入的数据有接近200条,就是傻呵呵地手工录入到系统,估计也要1天的时间.作为程序员,当然不会干

学习javascript面向对象 理解javascript原型和原型链_javascript技巧

先看一张图,梳理梳理. 一.基本概念 [原型链]每个构造函数都有一个对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针.那么,如果原型对象等于另一个原型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针.如果另一个原型又是另一个原型的实例,那么上述关系依然成立.如此层层递进,就构成了实例与原型的链条.[原型对象]这个对象包含可以由特定类型的所有实例共享的属性和方法.所有引用类型默认都继承了Object,而