You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: files/en-us/web/api/html_dom_api/microtask_guide/index.html
+6-6Lines changed: 6 additions & 6 deletions
Original file line number
Diff line number
Diff line change
@@ -23,7 +23,7 @@
23
23
24
24
<p>This event loop may be either the browser's main event loop or the event loop driving a <ahref="/en-US/docs/Web/API/Web_Workers_API">web worker</a>. This lets the given function run without the risk of interfering with another script's execution, yet also ensures that the microtask runs before the user agent has the opportunity to react to actions taken by the microtask.</p>
25
25
26
-
<p>JavaScript <ahref="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> and the <ahref="/en-US/docs/Web/API/MutationObserver">Mutation Observer API</a> both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current event loop pass is wrapping up. In order to allow microtasks to be used by third-party libraries, frameworks, and polyfills, the {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} method is exposed on the {{domxref("Window")}} and {{domxref("Worker")}} interfaces through the {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
26
+
<p>JavaScript <ahref="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a> and the <ahref="/en-US/docs/Web/API/MutationObserver">Mutation Observer API</a> both use the microtask queue to run their callbacks, but there are other times when the ability to defer work until the current event loop pass is wrapping up. In order to allow microtasks to be used by third-party libraries, frameworks, and polyfills, the {{domxref("queueMicrotask()")}} method is exposed on the {{domxref("Window")}} and {{domxref("Worker")}} interfaces through the {{domxref("WindowOrWorkerGlobalScope")}} mixin.</p>
27
27
28
28
<h2id="Tasks_vs_microtasks">Tasks vs microtasks</h2>
<p>First, each time a task exits, the event loop checks to see if the task is returning control to other JavaScript code. If not, it runs all of the microtasks in the microtask queue. The microtask queue is, then, processed multiple times per iteration of the event loop, including after handling events and other callbacks.</p>
53
53
54
-
<p>Second, if a microtask adds more microtasks to the queue by calling {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}}, those newly-added microtasks <em>execute before the next task is run</em>. That's because the event loop will keep calling microtasks until there are none left in the queue, even if more keep getting added.</p>
54
+
<p>Second, if a microtask adds more microtasks to the queue by calling {{domxref("queueMicrotask()")}}, those newly-added microtasks <em>execute before the next task is run</em>. That's because the event loop will keep calling microtasks until there are none left in the queue, even if more keep getting added.</p>
55
55
56
56
<divclass="notecard warning">
57
57
<p><strong>Warning:</strong> Since microtasks can themselves enqueue more microtasks, and the event loop continues processing microtasks until the queue is empty, there's a real risk of getting the event loop endlessly processing microtasks. Be cautious with how you go about recursively adding microtasks.</p>
<p>As such, you should typically use microtasks only when there's no other solution, or when creating frameworks or libraries that need to use microtasks in order to create the functionality they're implementing. While there have been tricks available that made it possible to enqueue microtasks in the past (such as by creating a promise that resolves immediately), the addition of the {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} method adds a standard way to introduce a microtask safely and without tricks.</p>
66
+
<p>As such, you should typically use microtasks only when there's no other solution, or when creating frameworks or libraries that need to use microtasks in order to create the functionality they're implementing. While there have been tricks available that made it possible to enqueue microtasks in the past (such as by creating a promise that resolves immediately), the addition of the {{domxref("queueMicrotask()")}} method adds a standard way to introduce a microtask safely and without tricks.</p>
67
67
68
68
<p>By introducing <code>queueMicrotask()</code>, the quirks that arise when sneaking in using promises to create microtasks can be avoided. For instance, when using promises to create microtasks, exceptions thrown by the callback are reported as rejected promises rather than being reported as standard exceptions. Also, creating and destroying promises takes additional overhead both in terms of time and memory that a function which properly enqueues microtasks avoids.</p>
let log = s => logElem.innerHTML += s + "<br>";</pre>
207
207
208
-
<p>In the following code, we see a call to {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} used to schedule a microtask to run. This call is bracketed by calls to <code>log()</code>, a custom function that outputs text to the screen.</p>
208
+
<p>In the following code, we see a call to {{domxref("queueMicrotask()")}} used to schedule a microtask to run. This call is bracketed by calls to <code>log()</code>, a custom function that outputs text to the screen.</p>
209
209
210
210
<preclass="brush: js">log("Before enqueueing the microtask");
let log = s => logElem.innerHTML += s + "<br>";</pre>
231
231
</div>
232
232
233
-
<p>In the following code, we see a call to {{domxref("WindowOrWorkerGlobalScope.queueMicrotask", "queueMicrotask()")}} used to schedule a microtask to run. This call is bracketed by calls to <code>log()</code>, a custom function that outputs text to the screen.</p>
233
+
<p>In the following code, we see a call to {{domxref("queueMicrotask()")}} used to schedule a microtask to run. This call is bracketed by calls to <code>log()</code>, a custom function that outputs text to the screen.</p>
234
234
235
235
<p>The code below schedules a timeout to occur in zero milliseconds, then enqueues a microtask. This is bracketed by calls to <code>log()</code> to output additional messages.</p>
Copy file name to clipboardExpand all lines: files/en-us/web/api/windoworworkerglobalscope/index.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -55,7 +55,7 @@ <h2 id="Methods">Methods</h2>
55
55
<dd>Accepts a variety of different image sources, and returns a {{jsxref("Promise")}} which resolves to an {{domxref("ImageBitmap")}}. Optionally the source is cropped to the rectangle of pixels originating at <em>(</em><code>sx</code>, <code>sy</code><em>)</em> with width <code>sw</code>, and height <code>sh</code>.</dd>
56
56
<dt>{{domxref("fetch()")}}</dt>
57
57
<dd>Starts the process of fetching a resource from the network.</dd>
<dd>Enqueues a microtask—a short function to be executed after execution of the JavaScript code completes and control isn't being returned to a JavaScript caller, but before handling callbacks and other tasks. This lets your code run without interfering with other, possibly higher priority, code, but <em>before</em> the browser runtime regains control, potentially depending upon the work you need to complete.</dd>
Copy file name to clipboardExpand all lines: files/en-us/web/javascript/guide/using_promises/index.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -394,7 +394,7 @@ Using [`async`/`await`](/en-US/docs/Web/JavaScript/Reference/Statements/async_fu
394
394
395
395
If you run into situations in which you have promises and tasks (such as events or callbacks) which are firing in unpredictable orders, it's possible you may benefit from using a microtask to check status or balance out your promises when promises are created conditionally.
396
396
397
-
If you think microtasks may help solve this problem, see the [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) to learn more about how to use [`queueMicrotask()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask"The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.") to enqueue a function as a microtask.
397
+
If you think microtasks may help solve this problem, see the [microtask guide](/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide) to learn more about how to use [`queueMicrotask()`](/en-US/docs/Web/API/queueMicrotask"The queueMicrotask() method, which is exposed on the Window or Worker interface, queues a microtask to be executed at a safe time prior to control returning to the browser's event loop.") to enqueue a function as a microtask.
0 commit comments