streamHTMLUnsafe script order

Streams HTML into a <div> with streamHTMLUnsafe({ runScripts: true }), per whatwg/html#12758. The method returns a WritableStream synchronously; strings written to it are fed to an HTML fragment parser that inserts nodes into the div as they're parsed.

The streamed markup contains, in order:

  1. Some text
  2. A classic external script, loaded via /slow-redirect/ with a 2000ms delay
  3. Some more text
  4. A second classic external script, delayed by only 500ms
  5. Some final text

Each script appends a paragraph to the div. The second script is much faster to fetch than the first, so if execution order were fetch order it would go first — it shouldn't. The expected order is 1, 2, 3, 4, 5, with the text after each script held back until that script has run.

The markup lives in content.html. It's fetched, piped through a TextDecoderStream, and piped straight into the writable — nothing buffers it first, and chunk boundaries come from the network rather than being chosen here. A logging TransformStream sits in the middle so you can see each chunk as it's pulled: if the parser blocks on a script, the chunks after it aren't pulled until that script has run.

The file is small enough to arrive in a single chunk, so tick the checkbox to insert another TransformStream that re-splits it into 3-character chunks. That lands tag names, attributes and the </script> end tags across chunk boundaries, so the parser has to hold partial tokens between writes.

Target div

Log