feat(docs): interactive script-loading demo on Script-Loading

[nucliweb]

What

Replaces the mermaid sequenceDiagram on Loading/Script-Loading with an interactive script-loading-timeline demo. The reader switches between <script>, <script async>, and <script defer> and steps through how each affects HTML parsing, download, and execution.

• New self-contained demo at public/demos/script-loading-timeline.html, following the embed contract documented in public/demos/README.md (posts demoHeight, syncs theme, no external dependencies).
• The strategy comparison table and the decision-tree flowchart on the page are kept as-is.

Why

The sequenceDiagram rendered too wide to fit the viewport and, being static, could not convey the temporal behaviour it described (parser pausing, parallel download, execution timing). This is the pilot for the "convert temporal mermaid diagrams to interactive demos" initiative.

Before: the static mermaid it replaces

sequenceDiagram
    participant Browser
    participant Parser as HTML Parser
    participant Script as Script

    Note over Browser,Script: Normal script - Blocks Everything

    Parser->>Script: Encounter script
    Note over Parser: PAUSE parsing
    Script->>Script: Download
    Script->>Script: Execute
    Note over Parser: Still waiting...
    Script-->>Parser: Done
    Note over Parser: RESUME parsing

    Note over Browser,Script: script async - Execute When Ready

    Parser->>Script: Encounter script async
    Note over Parser: Continue parsing
    par Parallel Operations
        Parser->>Parser: Keep parsing HTML
    and
        Script->>Script: Download in background
    end
    Script->>Parser: Ready to execute
    Note over Parser: Brief pause
    Script->>Script: Execute
    Note over Parser: Resume parsing

    Note over Browser,Script: script defer - Execute After Parsing

    Parser->>Script: Encounter script defer
    Note over Parser: Continue parsing
    par Parallel Operations
        Parser->>Parser: Keep parsing HTML
    and
        Script->>Script: Download in background
    end
    Parser->>Parser: Finish parsing
    Script->>Script: Execute (in order)
    Note over Script: All defer scripts run before DOMContentLoaded

Loading

After: the interactive demo

Verification (runtime, next dev + production next build)

• All three scenarios render 8 items each; the stepper walks all 7 steps; no stray script elements (raw tags in the demo data are escaped).
• Auto-height via the demoHeight contract: iframe sized 679 to 703px as steps reveal, well above the 400px minimum.
• Wraps without horizontal overflow at narrow widths.
• next build passes; the MDX compiles and the Demo import resolves.

Not included

llms.txt / llms-full.txt are not regenerated here (deferred to the counts/artifacts phase), so they still describe the old diagram until then.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
webperf-snippets	Ready	Preview	Aug 1, 2026 10:53pm
webperf-snippets-u6am	Ready	Preview	Aug 1, 2026 10:53pm