Permalink
Browse files

Add self.queueMicrotask()

  • Loading branch information...
domenic committed Aug 1, 2018
1 parent 4f438d5 commit 9d7cf125f960e6bb8d9b7c9456595f505f2e9d4b
Showing with 50 additions and 2 deletions.
  1. +50 −2 source
View
52 source
@@ -4110,6 +4110,17 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
</ul>
</dd>
<dt>Cooperative Scheduling of Background Tasks</dt>
<dd>
<p>The following feature is defined in the <cite>Cooperative Scheduling of Background
Tasks</cite> specification: <ref spec=REQUESTIDLECALLBACK></p>
<ul class="brief">
<li><dfn data-x-href="https://w3c.github.io/requestidlecallback/#the-requestidlecallback-method"><code>requestIdleCallback()</code></dfn></li>
</ul>
</dd>
</dl>
<hr>
@@ -89423,7 +89434,7 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
<p>To affect the world of observable JavaScript objects, then, you must <span>queue a task</span>
to perform any such manipulations. This ensures your steps are properly interleaved with respect
to other things happening on the <span>event loop</span>. Furthermore, you must choose a
<span>task source</span> when <span data-x="queue a task">queueing a task</span>; this governs the
<span>task source</span> when <span data-x="queue a task">queuing a task</span>; this governs the
relative order of your steps versus others. If you are unsure which <span>task source</span> to
use, pick one of the <a href="#generic-task-sources">generic task sources</a> that sounds most
applicable.</p>
@@ -89433,7 +89444,7 @@ dictionary <dfn>PromiseRejectionEventInit</dfn> : <span>EventInit</span> {
algorithms to be invoked in contexts involving multiple event loops. (Unlike contexts involving
multiple global objects, which happen all the time!) So unless you are writing a specification
which, e.g., deals with manipulating <a href="#workers">workers</a>, you can omit this argument
when <span data-x="queue a task">queueing a task</span>.</p>
when <span data-x="queue a task">queuing a task</span>.</p>
<p>Putting this all together, we can provide a template for a typical algorithm that needs to do
work asynchronously:</p>
@@ -90442,6 +90453,9 @@ interface mixin <dfn>WindowOrWorkerGlobalScope</dfn> {
long <span data-x="dom-setInterval">setInterval</span>(<span>TimerHandler</span> handler, optional long timeout = 0, any... arguments);
void <span data-x="dom-clearInterval">clearInterval</span>(optional long handle = 0);
// microtask queuing
void <span data-x="dom-queueMicrotask">queueMicrotask</span>(<span data-x="idl-Function">Function</span> <var>callback</var>);
// ImageBitmap
Promise&lt;<span>ImageBitmap</span>&gt; <span data-x="dom-createImageBitmap">createImageBitmap</span>(<span>ImageBitmapSource</span> image, optional <span>ImageBitmapOptions</span> options);
Promise&lt;<span>ImageBitmap</span>&gt; <span data-x="dom-createImageBitmap">createImageBitmap</span>(<span>ImageBitmapSource</span> image, long sx, long sy, long sw, long sh, optional <span>ImageBitmapOptions</span> options);
@@ -91349,6 +91363,37 @@ scheduleWork(); // queues a task to do lots of work</code></pre>
</div>
<h3>Microtask queuing</h3>
<p>The <code data-x="dom-queueMicrotask">queueMicrotask()</code> method allows authors to schedule
a callback on the <span>microtask queue</span>. This allows their code to run after the
currently-executing <span data-x="concept-task">task</span> has run to completion and the
<span>JavaScript execution context stack</span> is empty, but without yielding control back to the
browser's <span>event loop</span>, as would be the case when using, for example, <code
data-x="dom-setTimeout">setTimeout(<var>f</var>,&nbsp;0)</code>.</p>
<p>Authors ought to be aware that scheduling a lot of microtasks has the same performance
downsides as running a lot of synchronous code. Both will prevent the browser from doing its own
work, such as rendering or scrolling. In many cases, <code
data-x="dom-window-requestAnimationFrame">requestAnimationFrame()</code> or
<code>requestIdleCallback()</code> is a better choice. In particular, if the goal is to run code
before the next rendering cycle, that is the purpose of <code
data-x="dom-window-requestAnimationFrame">requestAnimationFrame()</code>.</p>
<dl class="domintro">
<dt><var>self</var> . <code subdfn
data-x="dom-queueMicrotask">queueMicrotask</code>(<var>callback</var>)</dt>
<dd><p><span data-x="queue a microtask">Queues</span> a <span>microtask</span> to run the given
<var>callback</var>.</p></dd>
</dl>
<p w-nodev>The <dfn><code
data-x="dom-queueMicrotask">queueMicrotask(<var>callback</var>)</code></dfn> method must
<span>queue a microtask</span> to <span data-x="es-invoking-callback-functions">invoke</span>
<var>callback</var>, and if <var>callback</var> throws an exception, <span>report the
exception</span>.</p>
<h3>User prompts</h3>
<!--
@@ -120377,6 +120422,9 @@ INSERT INTERFACES HERE
<dt id="refsREFERRERPOLICY">[REFERRERPOLICY]</dt>
<dd><cite><a href="https://w3c.github.io/webappsec-referrer-policy/">Referrer Policy</a></cite>, J. Eisinger, E. Stark. W3C.</dd>
<dt id="refsREQUESTIDLECALLBACK">[REQUESTIDLECALLBACK]</dt>
<dd>(Non-normative) <cite><a href="https://w3c.github.io/requestidlecallback/">Cooperative Scheduling of Background Tasks</a></cite>, R. McIlry, I. Grigorik. W3C.</dd>
<dt id="refsRESOURCEHINTS">[RESOURCEHINTS]</dt>
<dd><cite><a href="https://w3c.github.io/resource-hints/">Resource Hints</a></cite>, I. Grigorik. W3C.</dd>

0 comments on commit 9d7cf12

Please sign in to comment.