dom-tree-scheduler
v0.0.1
Published
A tree-aware task scheduler for the DOM
Maintainers
justinfagnaniReadme
dom-tree-scheduler
A tree-aware task scheduler for the DOM
Overview
This is a prototype implementation of the scheduler idea I proposed in WICG/webcomponents#1055.
This scheduler runs tasks in breadth-first tree order. This ensures that tasks are run top-down throught the DOM tree, even if tasks are scheduled concurrently at different levels of the tree. Top-down ordering prevents things like shearing and double-rendering.
Tasks are executed synchronously for root tasks (a task that was not enqueued
from another running task), and asynchronously for nested tasks. This allows
for nested tasks structures that run to completion by the time the outermost
queueDOMTask call completes. This is important for being able to have
synchronous DOM updates from code external to a task (ie, code external to a
component) and batcing from within a task (ie, code internal to a component
tree).
To batch multiple external task calls, either create a sync root task and then
perform operations that invoke taskss within it, or call queueDOMTaskAsync,
which will queue a task, but execute it in a future microtask so taht other
queueDOMTaskAsync calls can be batched with it. queueDOMTaskAsync is
useful for integrating with external observale data sources like Signals.
Example
Given this DOM tree:
<body>
<div id="foo">
<div id="bar"></div>
</div>
<div id="baz"></div>
</body>
And these task calls:
import {queueDOMTask, queueDOMTaskAsync} from 'dom-tree-scheduler';
queueDOMTask(document.body, () => {
// This is a root task and runs immediately.
console.log('body A');
queueDOMTask(document.body.querySelector('#baz'), () => {
// This is a nested task and runs after its parent has completed, in
// bread-first order with other enqueued tasks.
console.log('baz');
});
queueDOMTask(document.body.querySelector('#bar'), () => {
console.log('bar');
});
queueDOMTask(document.body.querySelector('#foo'), () => {
console.log('foo');
});
console.log('body B');
});The console logs
body A
body B
foo
bar
baz