1.机制如下:

注意一点:

宏任务需要多次事件循环才能执行完,微任务是一次性执行完的;

2.宏任务macrotask:

(事件队列中的每一个事件都是一个macrotask)

优先级:主代码块 > setImmediate > MessageChannel > setTimeout / setInterval

比如:setImmediate指定的回调函数,总是排在setTimeout前面

3.微任务包括:

优先级:process.nextTick > Promise > MutationObserver

4.举个栗子:

(1)下面这个代码输出结果是什么?(先不要看下面的答案,自己想一想)

(2)揭晓答案:

主程序和和settimeout都是宏任务,两个promise是微任务

第一个宏任务(主程序)执行完,执行全部的微任务(两个promise),再执行下一个宏任务(settimeout),所以结果为:

js的微任务和宏任务的更多相关文章

  1. 微任务、宏任务与Event-Loop

    首先,JavaScript是一个单线程的脚本语言.所以就是说在一行代码执行的过程中,必然不会存在同时执行的另一行代码,就像使用alert()以后进行疯狂console.log,如果没有关闭弹框,控制台 ...

  2. 总结:JavaScript异步、事件循环与消息队列、微任务与宏任务

    本人正在努力学习前端,内容仅供参考.由于各种原因(不喜欢博客园的UI),大家可以移步我的github阅读体验更佳:传送门,喜欢就点个star咯,或者我的博客:https://blog.tangzhen ...

  3. (转)总结:JavaScript异步、事件循环与消息队列、微任务与宏任务

    前言 Philip Roberts 在演讲 great talk at JSConf on the event loop 中说:要是用一句话来形容 JavaScript,我可能会这样: “JavaSc ...

  4. created与mounted执行顺序(关于微任务与宏任务)

    1.ps:只要你只使用created或者mounted中的一个不就好了吗[dog].这样只要在第一个异步任务代码跳出前,嵌套第二个任务函数就好了 最后面的两个链接一个是微任务与宏任务的通俗例子,一个是 ...

  5. 使用 Node.js 搭建微服务网关

    目录 Node.js 是什么 安装 node.js Node.js 入门 Node.js 应用场景 npm 镜像 使用 Node.js 搭建微服务网关 什么是微服务架构 使用 Node.js 实现反向 ...

  6. JavaScript Event Loop和微任务、宏任务

    为什么JavaScript是单线程? JavaScript的一大特点就是单线程, 同一时间只能做一件事情,主要和它的用途有关, JavaScript主要是控制和用户的交互以及操作DOM.注定它是单线程 ...

  7. JavaScipt 中的事件循环(event loop),以及微任务 和宏任务的概念

    说事件循环(event loop)之前先要搞清楚几个问题. 1. js为什么是单线程的? 试想一下,如果js不是单线程的,同时有两个方法作用dom,一个删除,一个修改,那么这时候浏览器该听谁的?   ...

  8. javascript事件环微任务和宏任务队列原理

    哈喽!大家好!我是木瓜太香,我又来嘞,今天来说说前端面试中经常别问到的 JS 事件环问题. JS 事件环 JS 程序的运行是离不开事件环机制的,这个机制保证在发生某些事情的时候我们有机会执行一个我们事 ...

  9. 事件循环:微任务和宏任务在v8中实现的简单理解

    微任务 在js中,当使用promise,会将当前任务加入事件执行的微任务队列,有且只有这一种方法可以,因为当使用了promise,在JS引擎中会触发VM::queueMicrotask,会向m_mic ...

随机推荐

  1. SpringMVC默认欢迎页面的问题

    使用SpringMVC很长时间,一直有个问题没有搞定,就是web.xml中默认欢迎页面转向控制器的问题. 由于答应朋友明天要交个网站,他们对默认页面有这样的要求,并且最好也别用js等等的跳转:所以今天 ...

  2. 利用Delphi编写IE扩展

    就是如何使IE扩展组件可以响应事件.    在自己的程序中使用过WebBrowser控件的朋友都知道,WebBrowser控件定义了诸如BeforeNavigate.DownloadComplete ...

  3. Android的Databinding-普通绑定

    1. 使用ActivityBasicBinding binding = DataBindingUtil.setContentView(this, R.layout.main);代替之前使用的setCo ...

  4. iOS开发-模板方法模式

    模板方法模式定义一个操作中的算法的骨架,而将步骤延迟到子类中.模板方法使得子类可以不改变一个算法的结构即可重定义算法的某些特定步骤.模板方法模式是由子类决定实现算法中的步骤,工厂方法由子类决定实现哪一 ...

  5. 微软BI 之SSIS 系列 - Execute SQL Task 中的 Single Row 与 Full Result Set 的处理技巧

    开篇介绍 Execute SQL Task 这个控件在微软BI ETL 项目中使用的频率还是非常高的,也是大部分入门 SSIS 初学者最早接触到的几个控制流控件. 我们通常使用 Execute SQL ...

  6. 腾讯QQ会员中心g_tk32算法【C#版】

    最近用C#写qq活动辅助类程序,碰到了会员签到的gtk算法不一样,后来网上找了看,发现有php版的(https://www.oschina.net/code/snippet_1378052_48831 ...

  7. java Serializable和Externalizable序列化反序列化详解(转载)

    一.什么是序列化? “对象序列化”(Object Serialization)是 Java1.1就开始有的特性. 简单地说,就是可以将一个对象(标志对象的类型)及其状态转换为字节码,保存起来(可以保存 ...

  8. 完美的代码生成器SNF.CodeGenerator-快速开发者的利器--SNF快速开发平台3.1

    第1章 SNF.CodeGenerator代码生成器简介 本项目是完全基于Spring.Net.Framework 平台进行研发.与Spring.Net.Framework平台无缝衔接.并支持模型层. ...

  9. .NET CORE MYSQL 微信小程序 HTTPS 随笔

    今天一天都没有撸码,没写BUG没改BUG,整一天都在弄那个微信小程序的配置了..唉.. 一个项目用的微信小程序,界面做出来了,就等着AJAX取网络数据后再显示到界面上了,查了下文档, 小程序取网络数据 ...

  10. golang slice

    golang 在for range一个slice时,会读出其cap长度.在for的过程中,即使动态append该slice,最终for也会在第一次读取的cap长度处停止. package main i ...