Home▸Networks & Graph Theory▸HTTP/2 Multiplexing vs HTTP/1.1 — Bandwidth Flow (2D)

HTTP/2 Multiplexing vs HTTP/1.1 — Bandwidth Flow (2D)

Interactive 2D simulator: watch a page's requests share a fixed-capacity link as a live stream graph, a per-request completion Gantt timeline, and a connection-slot wheel — the same HTTP/1.1 connection-cap vs HTTP/2 multiplexing bandwidth-sharing model as its 3D counterpart, rendered as three linked 2D data panels instead of a 3D scene.

Networks & Graph Theory2DModerate60 FPS📱 Mobile-adapted⇄ 3D version
2d-mobile-network-optimization ↗ Open standalone

Mobile network optimization guides always list "use HTTP/2 multiplexing" as a headline tip, but rarely show why it actually matters. This simulator models the mechanic directly: a page's requests race across a shared link of fixed bandwidth, and the two protocols differ only in how many requests are allowed to be in flight at once. Instead of a 3D client/server scene, the identical bandwidth-sharing equations are rendered as three linked 2D data panels — a scrolling stream graph of live bandwidth shares, a Gantt-style completion timeline, and a radial connection-slot wheel — so the queueing math itself becomes the picture. Tune the request count, connection cap, bandwidth and handshake latency, then compare the live completion time, queue depth and per-request wait time between the two protocols.

⚙ Under the hood

Interactive 2D simulator: watch a page's requests share a fixed-capacity link as a live stream graph, a per-request completion Gantt timeline, and a connection-slot wheel — the same HTTP/1.1 connection-cap vs HTTP/2 multiplexing bandwidth-sharing model as its 3D counterpart, rendered as three linked 2D data panels instead of a 3D scene.

networkinghttp2mobilebandwidthqueueingweb-performance

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)