js执行时序 宏任务和微任务

2023-11-15

宏任务一般是:包括整体代码scriptsetTimeoutsetIntervalI/OUI render
微任务主要是:PromiseObject.observeMutationObserver process.nextTick

 

nextTick 优先级比 PromisemicroTask 高,setTimeoutsetInterval优先级比setImmediate高。

执行栈在执行完同步任务后,查看执行栈是否为空,如果执行栈为空,就会去检查微任务(microTask)队列是否为空,如果为空的话,就执行Task(宏任务),否则就一次性执行完所有微任务。
每次单个宏任务执行完毕后,检查微任务(microTask)队列是否为空,如果不为空的话,会按照先入先出的规则全部执行完微任务(microTask)后,设置微任务(microTask)队列为null,然后再执行宏任务,如此循环。

console.log('script start');

setTimeout(function () { console.log('setTimeout'); }, 0);

Promise.resolve().then(function () { console.log('promise1'); }).

  then(function () { console.log('promise2'); });

console.log('script end');

console.log('script start');

async function async1() {

  await async2();

  console.log('async1 end')

}

async function async2() { console.log('async2 end') };

async1();

setTimeout(function () { console.log('setTimeout') }, 0)

new Promise(resolve => {

  console.log('Promise');

  resolve()

}).then(function () {

  console.log('promise1')

}).then(function () { console.log('promise2') });

console.log('script end');

console.log('start');

setTimeout(() => {

  console.log('timer1');

  Promise.resolve().then(function () { console.log('promise1') })

}, 0);

setTimeout(() => {

  console.log('timer2');

  Promise.resolve().then(function () { console.log('promise2') })

}, 0);

Promise.resolve().then(function () { console.log('promise3') });

console.log('end')

执行结果:

console.log('C')
var p = new Promise((resolve, reject) => {
    console.log('A')
    resolve('B')

    Promise.resolve('D').then(res => {
        console.log(res)
    })
})
p.then(res => {
    console.log(res)
})
setTimeout(() => {
    console.log('I')
    Promise.resolve('G').then(res => {
        console.log(res)
    })
})
setTimeout(() => {
    console.log('F')
    Promise.resolve('H').then(res => {
        console.log(res)
    })
})
console.log('E')

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js执行时序 宏任务和微任务 的相关文章

随机推荐

  • plsql链接服务器无响应,sqlplus 连接数据库无响应

    一批三台安装服务器 先后出现了sqlplus 连接数据库无响应问题 1 因为几乎同一时间出现问题 起初怀疑是网络组对网络有整体调整 后经过确认网络组有调整 但不影响我们的服务器 2 telnet server 1521端口正常响应 3 从终
  • 深度解析,抖音对口型唱歌类短视频内容制作流程,步骤技巧分享

    就像之前分享的信息差案例一样 任何时候都有信息差 但是还有一种叫认知差 就是认知高的人赚认知低的人的钱 不是有句话很火吗 你永远也赚不到认知以外的钱 更多精彩干货请关注共众号 萤火宠 你的认知很高 可以高客单价赚高认知人群的钱 但是也有些人
  • 图形学-改进的Bresenham算法

    图形学 改进的Bresenham算法 原理 代码 原理 虽然中点Bresenham算法是一种效率很高的算法 但也还有改进的余地 当然 其基本原理仍是每次在最大位移方向上走一步 而另一个方向上走还是不走取决于误差项的判断 根据中点Bresen
  • JSP和JavaBean

    8 JSP 8 1 什么是JSP Java Servlet Pages java服务器端页面 也和Servlet一样 用于实现动态Web技术 最大特点 写JSP就像是写HTML 区别 HTML只给用户提供静态的数据 JSP页面中可以嵌入Ja
  • 智慧政务行业发展报告

    转自微信公众号 智慧城市圈子邱文斌 一 智慧政务行业发展状况 从上个世纪90年代开始 政府信息化的建设就开始围绕 通 进行 而现今正逐渐过渡到 云 的建设 从网络的连通 数据的整合 到云的出现与整合 政府信息化的建设是一个漫长而又快速发展的
  • element-ui 实现多日期选择

    一 前端代码
  • Spring 多线程异步上传图片、处理水印、缩略图

    使用环境 SpringBoot FastDfs thumbnailator fdfs环境自己搞吧 thumbnailator maven依赖
  • C++中引用的用法以及将引用作为函数的形参

    在C 中引用就相当于是给变量起了一个别名 有点类似于指针 但是与指针又不同 引用的初始化 int i i 10 变量i的引用 引用必须在创建的时候就要初始化 而指针可以在任意的时候初始化 引用就相当于是给变量起了一个别名 int i r i
  • HTML基本结构

    HTML一般是在vscod中进行书写 后缀为html 其完整的基本结构如下 h1 一级标题 h1 每一个尖括号 lt gt 代表着标签或者说是元素 不同的标签代表有着不同的作用 标签一般成对出现后一个标签为前一个标签加一个 例如 但也有单个
  • 基于巴法云的esp8266实现温湿度、LED、sg90舵机和HC-RS04实现的小程序远程控制

    基于巴法云的esp8266实现温湿度 LED sg90舵机和HC RS04实现的小程序远程控制 具体代码 本项目想法已经在我脑海想了很久了 都没有时间去实现它 这次刚刚考完试就用了两天把它做了出来 希望对大家有帮助 有什么需要的可以在下面留
  • upload-labs:pass-10

    is upload false msg null if isset POST submit if file exists UPLOAD PATH deny ext array php php5 php4 php3 php2 html htm
  • 工厂三兄弟之工厂方法模式(四)

    5 重载的工厂方法 Sunny公司开发人员通过进一步分析 发现可以通过多种方式来初始化日志记录器 例如可以为各种日志记录器提供默认实现 还可以为数据库日志记录器提供数据库连接字符串 为文件日志记录器提供文件路径 也可以将参数封装在一个Obj
  • Puppeteer 安装与注意事项 《一》

    Puppeteer 安装与注意事项 1 安装node js 在使用puppeteer的时候 它一些低版本的node是不支持的 作者推荐使用8以上的版本 否则node在后面使用puppeteer的时候会 抛出 SyntaxError Unex
  • 从外部验证安全密码存储

    许多网站 包括 Adobe Yahoo LinkedIn Gawker等大型网站 不安全地存储用户密码 可以是纯文本格式的 也可以是加密的 可逆的 格式 或者是使用残破或蛮力的哈希函数 许多网站的密码存储机制仍然很差 所以呢 好吧 如果数据
  • js生成柱状图

  • 内存泄露的检测方法

    本文来自http blog csdn net lijun84 引用必须注明出处 在谈及内存泄漏时 对于没有太多经验的新人来说总是很头疼的一件事 因为如果项目早期没有将其纳入代码框架 后期部署上线之后 仅从进程 crash 的 dump 很难
  • openGauss学习笔记-36 openGauss 高级数据管理-TRUNCATE TABLE语句

    文章目录 openGauss学习笔记 36 openGauss 高级数据管理 TRUNCATE TABLE语句 36 1 语法格式 36 2 参数说明 36 3 示例 openGauss学习笔记 36 openGauss 高级数据管理 TR
  • Docker部署Emqx并配置ssl支持微信小程序

    1 端口介绍 1883 MQTT 协议端口 8084 MQTT SSL 端口 8083 MQTT WebSocket 端口 8080 HTTP API 端口 18083 Dashboard 管理控制台端口 2 拉取镜像 docker pul
  • 算法与数据结构—LeetCode刷题笔记

    算法刷题笔记 一 动态规划 53 最大子序和 300 最长上升子序列 70 爬楼梯 242 有效的字母异位词 463 岛屿的周长 文章与视频资源多平台更新 微信公众号 知乎 B站 头条 AI研习图书馆 一 动态规划 53 最大子序和 典型的
  • js执行时序 宏任务和微任务

    宏任务一般是 包括整体代码script setTimeout setInterval I O UI render 微任务主要是 Promise Object observe MutationObserver process nextTick