demo · v151

Throughput Bench

Race the four insertion strategies — innerHTML +=, insertAdjacentHTML, appendHTML, and streamAppendHTML — against a tunable payload size. Same total markup, four different paths.

Local benchmark. Numbers reflect parse + layout cost in this browser tab. streamAppendHTML is the only path that lets the browser interleave parse and paint, which is why it wins on large incremental payloads.

workload

20
20
20

results

(preview of rendered chunks will appear here)

code

// Streaming path — Chrome 151+
const writable = container.streamAppendHTML();
await fetch("/stream").then(r => r.body.pipeTo(writable));

// Positional helper — clean replacement for insertAdjacentHTML
container.appendHTML(chunk);

// Old way — full string concat triggers re-parse each tick
container.innerHTML += chunk;

see also

implementation reference

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