1. The Browser Network Sandbox
Executing HTTP load testing from within a web browser involves navigating browser security controls and transport-layer optimizations that do not exist in traditional command-line tools. Understanding these primitives is essential for interpreting client benchmark data accurately.
2. CORS: cors vs no-cors Modes
Cross-Origin Resource Sharing (CORS) dictates whether JavaScript can inspect response headers and bodies returned by origins other than the serving domain.
- cors Mode: The browser sends standard CORS headers (including
OPTIONSpreflight requests when custom headers or non-simple methods likePUT/DELETEare used). The target server must returnAccess-Control-Allow-Origin. This mode unlocks full inspection of HTTP status codes, latency percentiles, and error payloads. - no-cors Mode: Used when testing endpoints that do not implement CORS headers. Requests are transmitted across the wire, but the browser treats the response as an opaque response (status code
0, body unreadable). This mode is ideal for measuring pure server delivery without browser script inspection.
3. Connection Pools and Protocol Multiplexing
The transport protocol heavily impacts browser concurrency:
- HTTP/1.1 Socket Limits: All major browsers (Chrome, Firefox, Safari) enforce a hard limit of 6 concurrent TCP connections per origin. Setting concurrency > 6 over HTTP/1.1 causes excess requests to stall in the browser's internal socket queue before the SYN packet is sent.
- HTTP/2 & HTTP/3 Multiplexing: Over HTTP/2 or HTTP/3, the browser opens a single persistent TCP or QUIC connection and multiplexes hundreds of concurrent request streams simultaneously, eliminating connection queue bottlenecks.
4. High-Resolution Performance Timing
To measure request duration accurately without distortion from JavaScript event loop delays, client-side load engines utilize the W3C High Resolution Time API (performance.now()):
const t0 = performance.now();
try {
const res = await fetch(targetUrl, { signal: abortController.signal, mode: "cors" });
const latency = performance.now() - t0;
recordSuccess(res.status, latency);
} catch (err) {
const latency = performance.now() - t0;
recordError(err, latency);
}
Suggested & Related Reading
Explore related engineering guides from Kenneth D'Silva:
-
Implementing HTTP/2 and TLS 1.3 for Secure, Fast Ecommerce
HTTP/2 multiplexing and prioritisation, the TLS 1.3 handshake, session resumption, cipher an...
-
Preconnect & DNS Prefetch Strategies
Preconnect and dns-prefetch for ecommerce: the real cost of DNS, TCP and TLS setup, the cros...
-
Implementing HTTP/3 with QUIC for Magento & Shopify
What QUIC really changes for a store: stream-level head-of-line blocking, connection migrati...
-
Service Workers & Offline Caching Strategies
Service worker caching for ecommerce: cache-first, network-first and stale-while-revalidate ...