v148 · HTML · JavaScript

Streaming Race Visualizer

Watch HTML chunks arrive out of order and see how the new out-of-order streaming renders available content immediately — no blocking on chunk 1 before showing chunk 3. Also demonstrates moveBefore() state preservation.

streaming simulator

700ms
Click "Run simulation" to start.
0s—

Arriving chunks (out-of-order)

Waiting for stream…

Rendered output

Nothing rendered yet.

state preservation with moveBefore()

Type something into each card's input, then click "Re-order cards". With moveBefore(), input values are preserved because the DOM node is moved rather than removed and re-created.

Type in any input box above, then use one of the re-order buttons.

how out-of-order streaming works

The new <template for="id"> placeholder syntax lets the browser lay out a document with named holes. Chunks carry a for= reference to their placeholder. When a chunk arrives — regardless of order — the browser inserts it at the correct placeholder position and renders immediately. The old behavior blocked the entire stream if chunk 1 hadn't arrived yet.

<!-- Skeleton HTML sent immediately -->
<template for="article-1"></template>
<template for="article-2"></template>
<template for="article-3"></template>

<!-- Chunks arrive asynchronously in any order -->
<?start for="article-3"?>
  <article>Fast third item rendered immediately</article>
<?end?>

<?start for="article-1"?>
  <article>Slow first item arrives last — placed correctly</article>
<?end?>

references

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗