queueMicrotask 来执行微任务,Window 或 Worker 接口的 queueMicrotask() 方法,浏览器兼容性如下图所示。

在不支持 queueMicrotask 方法的浏览器里面,我们需要使用 polyfill 模拟实现。

下面的代码是一份 queueMicrotask() 的 polyfill。它通过使用立即 resolve 的 promise 创建一个微任务(microtask),如果无法创建 promise,则回落(fallback)到使用setTimeout()。

if (typeof window.queueMicrotask !== "function") {window.queueMicrotask = function (callback) {Promise.resolve().then(callback).catch(e => setTimeout(() => { throw e; }));};
}

为什么我们需要这个 api?

从微任务本身的概念来说的话,就是当我们期望某段代码,不阻塞当前执行的同步代码,同时又期望它尽可能快地执行时,我们就需要它。

一般情况下,如果是编写业务代码,我觉得很少会遇到这样的需求,唯一能想到的情况可能存在于一些对即时反馈有性能要求的场景,比如搜索,当输入关键字后发送异步请求获取搜索信息之后,我们可能会在前端对搜索结果进行一些处理,比如排序或者分组,但是这些操作可能不是优先级最高的任务,但它们又比较耗时(比如排序),因此我们可能期望推迟它们的执行,但又期望它们尽可能早地执行。

setTimeout(() => {console.log('setTimeout');
}, 0);queueMicrotask(() => {console.log('queueMicrotask');
});

运行结果不出意外应该是:

queueMicrotask
setTimeout

如果你熟悉 nodejs 的话,应该和 process.nextTick 是类似的。

使用其他方式进行模拟所带来的问题?

就是既然我们已经可以通过别的方式来模拟微任务的执行,我们还需要这个 api 干什么?比如,通过下面的代码:

setTimeout(() => {console.log('setTimeout');
}, 0);Promise.resolve().then(() => {console.log('queueMicrotask');
});

会得到和上面代码一样的运行结果。

因为微任务自身可以入列更多的微任务,且事件循环会持续处理微任务直至队列为空,那么就存在一种使得事件循环无尽处理微任务的真实风险。如何处理递归增加微任务是要谨慎而行的。

如果可能的话,大部分开发者并不应该过多的使用微任务。在基于现代浏览器的 JavaScript 开发中有一个高度专业化的特性,那就是允许你调度代码跳转到其他事情之前,而那些事情原本是处于用户计算机中一大堆等待发生的事情集合之中的。滥用这种能力将带来性能问题。

通过引入 queueMicrotask(),可以避免通过 promise 去创建微任务而带来的风险。举例来说,当使用 promise 创建微任务时,由回调抛出的异常被报告为 rejected promises 而不是标准异常。同时,创建和销毁 promise 带来了事件和内存方面的额外开销,这是正确入列微任务的函数应该避免的。

queueMicrotask 来执行微任务相关推荐

  1. async js 返回值_图文讲解浏览器执行JS过程中的微任务和宏任务

    背景 我们知道浏览器有一个特定的事件执行机制,专业名词叫做Event Loop.如下图所示,浏览器会优先执行同步代码,遇到异步的代码时,会被挂起并在需要执行的时候加入到 Task(有多种 Task) ...

  2. js 异步执行_js执行机制:同步与异步(宏任务与微任务)

    关于JavaScript,我们需要了解js是一门单线程语言,一切js版的多线程都是用单线程模拟出来的!!而单线程则意味着,所有任务都需要进行排队,前一个任务结束,才会执行后一个任务,如果前一个任务耗时 ...

  3. js 微任务 宏任务的执行顺序解释

    js 微任务 宏任务的执行顺序解释 js 是单线程执行的,js中的任务按顺序一个一个的执行,但是一个任务耗时太长,那么后面的任务就需要等待,为了解决这种情况,将任务分为了同步任务和异步任务,而异步任务 ...

  4. 宏任务与微任务执行顺序(超详细讲解)

    前言 写此之前,也查阅了很多文章,并结合自己的理解,说说对Event Loop模型的理解.以及对Promise.async/await在任务队列中的影响进行了分析,也给出了多种情形的任务案例以及分析解 ...

  5. 计算机组成实验脱机,计算机组成原理 实验七 脱机方式下微代码装入与执行实验.doc...

    计算机组成原理 实验七 脱机方式下微代码装入与执行实验 实验七 脱机方式下微代码装入与执行实验 一.实验目的 通过微程序的编制.装入.执行,验证微程序控制的工作方法. 观察微程序的运行过程,未进行简单 ...

  6. 计算机组成原理微代码的修改,计算机组成原理实验七脱机方式下微代码装入与执行实验...

    <计算机组成原理实验七脱机方式下微代码装入与执行实验>由会员分享,可在线阅读,更多相关<计算机组成原理实验七脱机方式下微代码装入与执行实验(6页珍藏版)>请在人人文库网上搜索. ...

  7. js回调执行顺序,同步任务与异步任务,宏任务与微任务

    JS执行顺序 JS是单线程的,即一段时间只能执行一个任务.执行一段代码,js总是按照顺序执行的,只不过在执行的过程中不会等待异步任务. 同步任务与异步任务 同步任务:立即执行的任务,直接被主线程读取并 ...

  8. 异步执行顺序——宏任务与微任务不同环境下的出队规则

    导读 javascript是一门单线程语言,一切javascript版的多线程都是用单线程模拟出来的,所以代码执行还是顺序执行的原则,只不过编写的顺序被执行环境重新"编排"了一下而 ...

  9. 创建一个storageevent事件_事件循环:微任务和宏任务

    浏览器中 JavaScript 的执行流程和 Node.js 中的流程都是基于 事件循环 的. 理解事件循环的工作方式对于代码优化很重要,有时对于正确的架构也很重要. 在本章中,我们首先介绍有关事物工 ...

最新文章

  1. 深度学习数据特征提取:ICCV2019论文解析
  2. Mac OS X snow leopard 10.6 VMware安装
  3. SAP CRM webclient ui开发workbench里点了Test按钮,发生了什么事
  4. 2017模拟赛:还款计算
  5. 如何在vmvare vsphere(ESXI)中移除磁盘中的文件
  6. 作者:林春雨,男,现任北京拓尔思信息技术股份有限公司高级副总裁、助理研究员。...
  7. CVPR 2019|手写签名认证的逆鉴别网络
  8. 计算机行政考试题库,2014香港特别行政区计算机等级考试试题 二级ACCESS考试题库...
  9. 圆弧裁剪算法c++_箍筋算法之争:按外皮长度计算与按中心线长度计算究竟相差多少?...
  10. 文件打开对话框设定过滤
  11. U盘启动装系统的操作方法(U盘PE启动安装GHOST XP)
  12. Buffer Overflow with Shellcode-protostar-stak5-bin-0x06
  13. Qt 之 打开pdf文件
  14. 腾讯云之轻量应用服务器搭建Socks5代理服务器实现游戏单窗口单IP
  15. 今天,IT女神们是怎么度过的(文末送礼品)
  16. 华为这个广告,我愿一辈子不买苹果!
  17. CS5213芯片|HDMI to VGA转换头芯片
  18. 《浊酒一杯忆往昔, 似水流年探追忆》
  19. 2022高教社杯 国赛数学建模 B题思路
  20. 第7章第31节:四图排版:四张图片两两一组并行排列 [PowerPoint精美幻灯片实战教程]

热门文章

  1. 用几个最简单的例子带你入门 Python 爬虫
  2. 假如 C++ 是一只箭,你会用它来射哪只雕?
  3. 漫画:什么是神秘的“凯利公式”?
  4. 混合架构、暗数据...这些云原生安全 bug 稍不留神会带来灾难!
  5. 如何一站式打造 AIoT 人才?
  6. 苹果 Siri 被曝涉嫌泄露用户隐私;中国联通回应 5G 入网问题;PHP 7.4 beta 1 发布 | 极客头条...
  7. 首款搭载国产CPU的域名服务器发布;iPhone彻底淘汰Lightning接口?ChromeOS 75发布 | 极客头条...
  8. Python 进阶:全面解读高级特性之切片!
  9. 每秒几十万的大规模网络爬虫是如何炼成的?
  10. 5G 爆发前夕,这些科技巨头们聚在一起“密谋”了些什么?!