Interactive Diagram of HTTP/2 Multiplexing Architecture

Tech architecture infographic titled "HTTP/2 Multiplexing" using archetype DATA PIPELINE (extract → transform → load), adapted to accurately explain how HTTP/2 multiplexing works for a senior engineer. Show a left-to-right whiteboard-style flow with labeled boxes and directional arrows. Include these main boxes: 1) Browser — icon: web browser — role: 'Initiates one HTTPS connection and sends many concurrent requests'; 2) DNS Resolver — icon: network node — role: 'Resolves origin hostname to IP address'; 3) CDN / Load Balancer — icon: generic cloud gateway — role: 'Terminates TLS and forwards HTTP/2 traffic'; 4) API Gateway / Web Server — icon: server rack — role: 'Accepts multiplexed streams on one TCP connection'; 5) Stream Scheduler — icon: branching lanes — role: 'Interleaves HTTP/2 frames across concurrent streams'; 6) Application Service — icon: microservice box — role: 'Processes each request independently and builds responses'; 7) Cache — icon: cache cylinder — role: 'Serves hot objects with low latency'; 8) Queue — icon: message queue — role: 'Buffers async work triggered by requests'; 9) Database — icon: database cylinder — role: 'Stores durable application data'; 10) Response Encoder — icon: packet/frame symbol — role: 'Packages HEADERS and DATA frames back onto streams'. Add arrows with short English labels: 'DNS query', 'A / AAAA record', 'TCP 3-way handshake', 'TLS 1.2+ with ALPN h2', 'HTTP/2 connection preface', 'SETTINGS frame', 'Multiplexed request streams', 'HEADERS + DATA frames', 'Cache lookup', 'Cache hit', 'SQL query', 'Row set', 'Enqueue job', 'ACK', 'Interleaved response frames', 'Reassembled responses in browser'. Emphasize technically accurate HTTP/2 behavior: many logical streams sharing one TCP connection, frames interleaved in transit, request/response pairing by stream ID, optional server push only as a muted note marked 'historical / rarely used', head-of-line blocking reduced at HTTP layer but still possible at TCP layer. Keep ETL-style stage grouping as: Extract = client generates assets/API requests; Transform = gateway and scheduler split requests into streams and frames, route work to cache/service/queue; Load = backend data retrieval and framed responses loaded back over the same connection. Include small sub-boxes or callouts for 'Stream 1', 'Stream 3', 'Stream 5' under the same connection line to show concurrency. Show one shared connection lane labeled 'Single TCP connection' with multiple colored mini-lanes inside labeled 'HTTP/2 streams'. Include a compact note box: 'Not an audited reference architecture; conceptual protocol illustration'. Add numbered legend 1-7 in English: 1) 'Browser resolves the origin and opens a single TCP connection.' 2) 'TLS negotiates HTTP/2 using ALPN h2 over HTTPS.' 3) 'The client opens multiple streams for HTML, CSS, JS, images, or API calls.' 4) 'HEADERS and DATA frames from different streams are interleaved on the same connection.' 5) 'The server scheduler demultiplexes frames by stream ID and dispatches work to cache, app logic, queue, and database.' 6) 'Responses are encoded as frames and sent back concurrently, not one full response at a time.' 7) 'The browser reassembles frames per stream and renders assets as each response completes.' Visual style: hand-drawn whiteboard sketch, cool blue and cyan palette, subtle gray accents, marker-like outlines, clean spacing, senior-engineer editorial tone, precise annotations, editorial developer-blog illustration, isometric or flat tech-diagram style, vector-clean infographic layout. All text MUST be written in English (array). Every heading, label, caption, legend and metric name in the image must be in English — not English. Spell each English word correctly using English characters and diacritics. Numbers stay as digits, no real cloud-vendor logos (AWS / GCP / Azure) — use generic cloud icons, no watermarks No real cloud-vendor logos (AWS, GCP, Azure) beyond generic cloud icons. Common protocol names (HTTPS, TCP, JWT, OAuth, REST, GraphQL) stay in canonical English form. No security-claim overstatements (do not present diagrams as audited reference architectures).