PixiJS Assets maxConcurrency exceeding browser connection limits causes queuing latency

Direct Answer

The default maxConcurrency: 10 in PixiJS Assets v7+ exceeds the typical browser per-origin connection limit of ~6 under HTTP/1.1. When the pool size surpasses the browser's actual capacity, excess requests sit in the browser's internal queue, adding latency that grows with the number of assets. Under HTTP/2 the limit is higher (roughly 6–10 concurrent streams), but the same queuing behavior appears once the stream cap is reached.

Confirmed Behavior

• HTTP/1.1: Browsers enforce a hard limit of approximately six simultaneous connections per origin. Requests beyond six are queued by the browser before they ever reach the network layer.
• HTTP/2: Multiplexing allows many logical streams over one TCP connection, yet browsers still cap concurrent streams (commonly 6–10) to protect the main thread and memory.
• PixiJS Assets pool: A single global maxConcurrency controls all Assets.load() calls. The default of 10 is chosen for HTTP/2 environments and will trigger browser queuing on HTTP/1.1.
• Retries: Failed loads re-enter the same global queue. Current releases do not expose a configurable back-off policy; retries are immediate and can prolong the overall load if multiple assets fail.

Likely Explanation (Marked for Review)

When the internal pool size exceeds the browser's connection or stream limit, the browser queues the excess requests. PixiJS's own queue then shows those requests as "pending" while they wait for a free browser slot. This double-queue effect is what produces the disproportionate latency growth. The exact stream cap varies by browser vendor, version, and TLS configuration, so the 6/10 figures are guidelines, not specifications.

Mitigation Steps

1. Match the pool to the protocol. Detect the protocol at runtime and set Assets.maxConcurrency accordingly:

   if (window.location.protocol === 'http:') {
     // Heuristic: assume HTTP/1.1 if not HTTPS
     Assets.maxConcurrency = 6;
   } else {
     // HTTPS usually means HTTP/2 capable
     Assets.maxConcurrency = 8; // conservative HTTP/2 cap
   }

2. Load critical textures first. Split the manifest and call Assets.load(criticalManifest) before the bulk load. The global pool still applies, but the first call gets the first available slots.

   await Assets.load(criticalManifest); // first-frame textures
   await Assets.load(restManifest);     // remaining assets

3. Observe the Network panel. Open DevTools → Network, filter by the asset origin, and watch the "Queued" column or the waterfall. If you see requests stuck in "Queued" while fewer than maxConcurrency are active, lower the value until queuing disappears.
4. Consider a retry wrapper. Since back-off isn't built in, wrap flaky assets in a small helper that retries with exponential delay before passing the promise to Assets.load().

Prioritization Without Lowering Global Concurrency

As of PixiJS v7.x there is no supported priority flag on individual Assets.load() calls. The only way to guarantee first-frame textures load ahead of others is to sequence the loads as shown above. A future release may add a priority option; check the changelog for v8+.

One Diagnostic Detail Needed

What protocol does your production origin serve (HTTP/1.1 or HTTP/2), and do you control the server configuration? The answer determines whether a static maxConcurrency: 6 is safe or whether you can keep a higher value with HTTP/2.