⚔️ The Great Streaming Quest 🏰

A Cloudflare Workers Demo for HTML Streaming Performance

🦸 Hero = Browser

🧙 Quest Giver = Server

🗺️ Map = <head> tag

🛡️ Heavy Armor = CSS/JS

🏔️ Dungeon = Database

💰 Treasure = <body> data

This demo shows how streaming the <head> before the <body> improves page load performance. The browser can download CSS, fonts, and JS in parallel while the server fetches data.

� Race: Streaming vs Traditional

⚡ Streaming Demo 🐌 Traditional Demo 📊 Config (JSON)

🚀 Why Stream the <head>?

✅ With Streaming

Browser receives <head> instantly.
Downloads CSS/JS in parallel with server work.
Total: ~2000ms

❌ Without Streaming

Browser waits for entire response.
Downloads CSS/JS after server finishes.
Total: ~2800ms

How it works: The Worker uses TransformStream to send the <head> immediately via ctx.waitUntil(), then continues fetching data. The browser parses the <head> and starts downloading CSS/JS assets while the server is still working.