Out of order streaming

at a glance

why it exists

Classic HTTP streaming delivers content top-to-bottom. If a slow database query powers a section at the top of the page, everything below waits. Today, fixing this requires either JavaScript (e.g. fetch + innerHTML) or multiple round-trips. Out of order streaming is a declarative, zero-JS solution: the server streams a placeholder, continues with fast content below, then later streams a <template for="id"> that the browser uses to replace the placeholder — no script involved.

how it works

1. Mark a region with PI range markers

The server emits processing instructions to delimit the region that should be replaced later. These require the Parse processing instructions in HTML feature (also v148).

<!-- Server streams this first -->
<main>
  <?start slow-section?>
  <p>Loading…</p>
  <?end slow-section?>

  <p>Fast content rendered immediately.</p>
</main>

2. Stream a replacement template later

When the slow data is ready, the server writes a <template for="slow-section">. The browser replaces the marked region's content with the template's content in-place — no layout disruption, no JS required.

<!-- Server streams this after the slow query completes -->
<template for="slow-section">
  <article>
    <h2>Top result: Gadget X</h2>
    <p>Price: $49 — In stock</p>
  </article>
</template>

Result

The user sees "Loading…" for the slow section, while fast content below renders immediately. When the template arrives, the placeholder is replaced without a repaint of unrelated content.

key primitives

browser support

see also

• whatwg/html PR #11818 — spec draft
• Parse processing instructions in HTML — prerequisite feature
• Renewed HTML insertion & streaming methods — JS-based companion
• chromestatus: Out of order streaming
• chrome-platform-showcase: demos