程序员经验分享-hwhale

事件循环上下文中微任务和宏任务之间的区别

2024-01-29

我刚刚读完 Promises/A+ 规范，并偶然发现了术语 microtask 和 Macrotask：请参阅http://promisesaplus.com/#notes http://promisesaplus.com/#notes

我以前从未听说过这些术语，现在我很好奇它们之间有什么区别？

我已经尝试在网上查找一些信息，但我找到的只是 w3.org Archives 中的这篇文章（它没有向我解释其中的差异）：http://lists.w3.org/Archives/Public/public-nextweb/2013Jul/0018.html http://lists.w3.org/Archives/Public/public-nextweb/2013Jul/0018.html

此外，我还发现了一个名为“macrotask”的 npm 模块：https://www.npmjs.org/package/macrotask https://www.npmjs.org/package/macrotask同样，尚不清楚到底有什么区别。

我所知道的是，它与事件循环有关，如中所述https://html.spec.whatwg.org/multipage/webappapis.html#task-queue https://html.spec.whatwg.org/multipage/webappapis.html#task-queue and https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

我知道，根据 WHATWG 规范，理论上我应该能够自己提取差异。但我确信其他人也可以从专家给出的简短解释中受益。


事件循环的一圈将会有正好一个正在处理的任务宏任务队列（这个队列简称为任务队列 in the WHATWG 规范 https://html.spec.whatwg.org/multipage/webappapis.html#task-queue）。 该宏任务完成后，所有可用的微任务将被处理，即在同一复飞周期内。当这些微任务被处理时，它们可以将更多的微任务排队，这些微任务将一一运行，直到微任务队列耗尽。

这会产生什么实际后果？

If a 微任务递归地将其他微任务排队，可能需要很长时间才能处理下一个宏任务。这意味着，您最终可能会遇到 UI 阻塞或应用程序中某些已完成的 I/O 闲置的情况。

然而，至少关于 Node.js 的 process.nextTick 函数（它将微任务），通过 process.maxTickDepth 内置了针对此类阻塞的保护。该值设置为默认值 1000，减少进一步处理微任务达到此限制后允许下一个宏任务待处理）

那么什么时候用什么？

基本上，使用微任务当你需要以同步方式异步做事情时（即当你会说在最近的将来执行此（微）任务）。 否则，坚持宏任务.

Examples

宏观任务： 设置超时时间 https://developer.mozilla.org/docs/Web/API/WindowTimers/setTimeout, 设置时间间隔 https://developer.mozilla.org/docs/Web/API/WindowTimers/setInterval, 设置立即 https://developer.mozilla.org/docs/Web/API/Window/setImmediate, 请求动画帧 https://developer.mozilla.org/docs/Web/API/window/requestAnimationFrame, I/O https://developer.mozilla.org/docs/Mozilla/Projects/NSPR/Reference/I_O_Functions,UI渲染
微任务： process.nextTick https://nodejs.org/uk/docs/guides/event-loop-timers-and-nexttick/, Promises https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise, 队列微任务 https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask, 变异观察者 https://developer.mozilla.org/docs/Web/API/MutationObserver

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

javascript

nodejs

promise

EventLoop

事件循环上下文中微任务和宏任务之间的区别 的相关文章

  • 如何刷新nodejs child_process stdin.write

    我需要在服务器端为客户端运行一个 C 程序 这个程序可以是交互式的 我正在使用 Node js child process 类 但我在这里看到一个问题 由于我需要保持程序交互 因此客户端和 Node js 服务器之间会来回交换消息 1 程序

  • WebStorm已将目录中的所有文件标记为非项目文件

    WebStorm 已将我的项目子目录 根目录的服务器部分 中的所有文件标记为非项目文件 它发生在我转换到 Babel 然后又转换到 TypeScript 的过程中 我已经删除了 TypeScript 的内容 想知道这是否与该配置有关 我相信

  • 如何从主体上的 onClick 事件获取鼠标单击的绝对位置？

    我试图获取鼠标单击相对于浏览器 主体的绝对位置 顶部和左侧 not主体内的任何父元素 我有一个绑定到 body 的侦听器 但 e pageX 和 e pageY 为我提供了相对于 div 的位置 请注意 我可以利用 jQuery 和 YUI

  • 音频端播放新文件

    我有一个webapp https radio repjesus com当您使用 ajax jquery 单击链接时加载并播放音轨 一切正常 但当曲目结束时 曲目将设置为循环 并且这种情况可以永远持续下去 我希望播放器从数据库中自动加载随机曲

  • 打开图层地图，经纬度获取地址

    我正在尝试获取带有经度和纬度的地址 城市 邮政编码 街道地址 但我不知道如何获取 我正在使用开放图层 当我单击地图的一部分时 会获取该位置的经度和纬度 有人有解决方案吗 div class map div

  • TypeScript 中类似字典的对象应使用什么类型？

    在 TypeScript 中 我有时会使用期望 或返回 对象的函数 其中这些对象被视为字典 基本上我的问题是 这里使用的正确类型是什么 我可以用 Record

  • 如何在alert()之后给予focus()？

    我有类似的东西

  • 如何从节点服务器发送 Firebase 云消息传递？

    有什么办法可以发送通知吗FCM from a node js server 我在文档中没有找到任何有关它的内容 通过 Firebase Cloud Messaging 发送消息需要调用 HTTP 端点 如发送下游消息的文档 https fi

  • HTML5：从存储的二进制字符串播放视频

    我正在尝试使用 FileReader readAsBinaryString Blob File 将视频文件的内容作为二进制字符串读取 如示例中所示http www html5rocks com en tutorials file dndfi

  • JavaScript 排序列表

    Javascript 或 jQuery 中有排序列表吗 我有一个巨大的列表 随着时间的推移 插入操作很少 每次添加单个项目时 我无法为整个列表调用 object sort 我需要插入 o log n 不 没有 你拥有的只是Array sor

  • 如何仅使用 Javascript 减慢平滑滚动的默认速度？

    我的目标是按回车键 然后让网站滚动到底部 我已将滚动行为设置为平滑 一切都正常工作 除了平滑滚动的默认速度太快了 我怎样才能减慢它的速度 下面是我的代码 请不要使用jquery 谢谢你 document body onkeyup funct

  • (jQuery) 在 cookie 中单击时保存复选框状态

    关于此功能有很多主题 但我似乎无法让它工作 我在谷歌上搜索了这个具体案例 有一堆链接让我来到这里 但奇怪的是我似乎无法让它们工作 我所做的唯一工作如下 http dl dropbox com u 2238080 a old z htm ht

  • 添加 X 轴标题会导致 Uncaught RangeError:minimumFractionDigits value is out of range in Chart.js

    我正在尝试向 Chart js 图表的 X 轴添加标题 但是当我将标题属性放在 x 轴上时 出现错误 Uncaught RangeError minimumFractionDigits value is out of range 但它并没有

  • Javascript 仅在 Chrome 中打开开发者工具后才起作用

    我和这里有同样的问题 为什么JavaScript只有在IE中打开开发者工具一次后才能工作 https stackoverflow com questions 7742781 why javascript only works after o

  • 在画布中的鼠标位置放大/缩小

    我正在尝试使用 p5 js 实现缩放功能 当前缩放级别以及 x 和 y 位置存储在controls view目的 默认位置或 0 0 位置位于左上角 问题是调整放大 缩小时的 x 和 y 位置值 以便无论视图的当前位置是什么 它都会停留在缩

  • NodeJS：MySQL 有时会引发 ETIMEDOUT 错误

    我目前正在使用 NodeJS 开发一个应用程序 然而 经常服务器抛出这个错误 我无法与mysql交互 Error read ETIMEDOUT code ETIMEDOUT errno ETIMEDOUT syscall read fata

  • 如何解析使用YUI数据源返回的NULL值

    我正在使用 YUI 数据表和数据源来渲染我的项目之一中的数据 返回的数据恰好为NULL YUI数据源无法解析它 下面是数据源和数据表的声明代码 为了便于阅读 我将每个声明分开 列说明声明 var columnDescription key

  • 反应本机中的“未知命名模块”错误

    我正在使用 React Native 创建一个应用程序 但某些导入会引发标题中的错误 Unknown named module 两个包都会发生这种情况 react native material design and react nativ

  • 如何提交表单 onkeyup 操作

    我正在尝试保存表格onkeyup行动 我是 jQuery 新手 这可能吗 我很感激任何帮助 编辑1 保存表单意味着保存到服务器 有没有办法增加0 2秒的延迟 此代码将在 keyup 上提交您的表单 element bind keyup fu

  • Google Universal Analytics - 命令被忽略

    我正在使用 Google Universal Analytics 来跟踪页面浏览量 当我导航到具有 Google Analytics 网站实时功能的页面时 我可以看到 因此我的代码一定可以正常工作 然而 Chrome 一直在控制台中显示 I

随机推荐

  • 如何控制三次单击突出显示？ （HTML）

    这是一个示例文本 Label Some text here 我怎样才能拥有它 以便当我三次单击该行时 它尝试仅突出显示此处的 Some text here 而不是整行 我可以发誓我以前见过用 css 完成的 我只是想不出办法 span La

  • preg_match() 和 preg_replace() 慢吗？

    我已经用 PHP 编码有一段时间了 我一直读到你应该只使用preg match and preg replace当你不得不这样做时 因为它会降低性能 为什么是这样 使用20真的很糟糕吗 preg matches在一个文件中而不是使用另一个

  • 如何使用 MatPaginator 更改分页标签中的文本？ [复制]

    这个问题在这里已经有答案了 我正在使用角度材质 如何更改分页显示中标签中的文本 特别是 我想自定义页面大小选择器的标签 我尝试这样做 但似乎不起作用

  • 如何使用行分组对 PrimeNG 数据表中的数据进行排序

    我想要做的是对已经按字母顺序或自定义顺序分组的数据进行排序 我用的是sortField属性指定组头顺序 但我也需要对组内的数据进行排序 我有同样的问题 我添加了自定义排序来解决这个问题 添加自定义排序

  • java中执行多条SQL语句

    我想执行一个查询Java 我创建一个连接 然后我想执行一个INSERT语句 完成后 连接将关闭 但我想通过连接执行一些插入语句 当循环完成时 然后关闭连接 我能做些什么 我的示例代码是 public NewClass throws SQLE

  • TypeScript 按数组中的对象对对象进行排序

    有谁知道如何按任务中的 TaskTime 值对 Array 和 Person 进行排序 export class Person Id string Email string FirstName string LastName string

  • 类中的后代选择器

    由此我可以很好地理解选修课 http css maxdesign com au selectutorial selectors descendant htm基于什么元素 标签后代选择器是什么 它们如何工作 为什么工作以及目的是什么 但后来我

  • slurm：如何在另一个用户下提交作业并防止读取其他用户的文件？

    基于以下thread https stackoverflow com q 44540590 2402577 我正在尝试向另一个用户发送作业 我登录的身份是main user 并且 slurm 作业通过以下方式提交main user那可以做r

  • 启用 AR 相机时 iPhone X 手电筒会关闭

    我正在构建一个 AR 应用程序 需要将手电筒打开为手电筒模式 在我的 iPhone 8 上打开手电筒模式然后启用 AR 场景效果很好 但在 iPhone X 上 手电筒会打开然后再次关闭 有什么办法可以解决这个问题 或者我必须做一些特定的事

  • Symfony 错误 500 与 app.php，在 app_dev.php 上工作正常

    我目前正在尝试通过访问 app php 来使用我们的 基本 Symfony 2 应用程序 但是 每当我尝试访问 app php 时 都会收到错误 500 我检查了日志 生产日志为空 我已经尝试过配置文件中的 assetic 条目 但无济于事

  • 如何更改 pyplot.specgram x 和 y 轴缩放？

    我以前从未使用过音频信号 对信号处理知之甚少 尽管如此 我需要使用来表示音频信号pyplot specgram函数来自绘图库图书馆 我是这样做的 import matplotlib pyplot as plt import scipy io

  • ExifLib 可在 WPF / XAML 应用程序中使用吗？

    我想从 jpg 图像中提取 exif 数据 ExifLib http www nuget org packages ExifLib似乎是简化这项繁琐工作的不错选择 因此我通过 NuGet 安装了它 然后我尝试开始使用示例代码here htt

  • TYPO3：将插件从 USER 更改为 USER_INT 类型

    我有一个可用的 TYPO3 扩展 附有这个维基页面 http wiki orbeon com forms doc developer guide form runner typo3 extension 如何更改此扩展的代码 使其成为 USE

  • UISearchController searchBar在推送视图控制器时不会消失

    我在 ma 中使用 UISearchControllerUIViewcontroller其中包含一个UITableView 我这样做是在viewDidLoad self searchController UISearchController

  • 由于位图大小过大而导致内存不足异常

    由于虚拟内存堆大小有限 我遇到内存不足的问题 这是我从服务器获取位图的代码 SuppressWarnings unchecked public class DrawableManager SuppressWarnings rawtypes

  • Android 通知未在 API 26 上显示

    我最近将我的应用程序更新到 API 26 并且通知不再起作用 甚至没有更改代码 val notification NotificationCompat Builder this setSmallIcon R drawable ic noti

  • Amazon S3 重定向和 Cloudfront

    我正在尝试使用此处引用的对象在 S3 上设置 301 重定向http docs aws amazon com AmazonS3 latest dev how to page redirect html http docs aws amazo

  • Git：更新后挂钩，运行需要访问存储库中所有文件的脚本

    我现在遇到了一些困境 因为我需要一个脚本来运行 每当远程存储库更新时 即 每当有人运行 git Push 从存储库中的文件构建包 然后 这些包被放置到 git 服务器上的一个目录中 该目录通过 HTTP 公开给客户端以供将来使用 问题是 我

  • 在 Javascript 中，如何判断用户是否同时按下两个键？

    在 Javascript 中 如何判断用户是否同时按下两个键 例如 我在屏幕中间画了一个圆圈 我想在用户按住向上箭头时向上移动它 在用户按住向右箭头时向右移动它 这部分工作很容易 如果用户同时按住向上和向右箭头 我想沿对角线 向上和向右移动

  • 事件循环上下文中微任务和宏任务之间的区别

    我刚刚读完 Promises A 规范 并偶然发现了术语 microtask 和 Macrotask 请参阅http promisesaplus com notes http promisesaplus com notes 我以前从未听说过

热门标签