fix: amortize ChunkReader buffer growth (#3154)

readChunk reallocated and copied the whole buffer on every network read,
so one frame cost O(reads²) — ~435 ms vs ~2 ms for the same 1 MiB at the
~66 B reads a slow client actually produces, all blocking the event loop:
bounded per request by bodySizeLimit on the server, unbounded on the
client leg where the same reader decodes responses.

The reader now tracks its backing store separately from the live view and
grows in three tiers, cheapest first: append while the store has tail
room, compact the consumed prefix (next() advances past drained frames)
when reclaiming it makes room, reallocate at >=2x only when a frame
genuinely outgrew the store. Same bytes, same framing, same failure
behavior — only the allocation strategy changes (frenzzy's option 1, with
the compaction tier keeping long multi-frame streams allocation-stable).

The regression test counts allocations rather than milliseconds, as the
report suggested: one large frame at 66 B reads must allocate O(log reads)
(the quadratic code measures ~995, one per read), with correctness pinned
across read granularities including boundaries inside the 12-byte header.

Reported by @frenzzy with the measurements and the fix plan.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: ryansolid

.changeset/fix-chunk-reader-quadratic-growth.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/web": patch
+---
+
+Amortize ChunkReader buffer growth: the framed-stream reader reallocated and copied everything received so far on every network read, making one frame O(reads²) — ~200× the CPU for a payload delivered at slow-client read sizes, on both the server (argument decode) and client (response decode) legs. Growth now appends in place, compacts drained frames, and reallocates at ≥2× only when outgrown (#3154)

packages/web/server-functions/src/shared.ts

@@ -937,19 +937,48 @@ export function createChunk(data) {
 export class ChunkReader {
   constructor(stream) {
     this.reader = stream.getReader();
-    this.buffer = new Uint8Array(0);
+    // `buffer` is the view of not-yet-consumed bytes; `store` is its backing
+    // allocation, kept separately so growth can be amortized (see readChunk).
+    this.store = new Uint8Array(0);
+    this.buffer = this.store;
     this.done = false;
   }
 
   async readChunk() {
     const chunk = await this.reader.read();
-    if (!chunk.done) {
-      const newBuffer = new Uint8Array(this.buffer.length + chunk.value.length);
-      newBuffer.set(this.buffer);
-      newBuffer.set(chunk.value, this.buffer.length);
-      this.buffer = newBuffer;
-    } else {
+    if (chunk.done) {
       this.done = true;
+      return;
+    }
+    // Amortized growth (#3154). Reallocating the whole buffer per network
+    // read made one frame O(reads²): a 1 MiB argument payload delivered at
+    // the ~66 B reads a slow client actually produces cost ~200× the CPU of
+    // the same payload at normal read sizes — all of it blocking the event
+    // loop, inside bodySizeLimit on the server and unbounded on the client
+    // leg, where the same reader decodes responses. Three tiers, cheapest
+    // first: append in place while the store has tail room; compact the
+    // consumed prefix (next() advances `buffer` past drained frames) when
+    // reclaiming it makes room; reallocate at ≥2× only when the frame
+    // genuinely outgrew the store. Same bytes, same framing, same failure
+    // behavior — only the allocation strategy changes.
+    const incoming = chunk.value;
+    const store = this.store;
+    const start = this.buffer.byteOffset;
+    const end = start + this.buffer.length;
+    const needed = this.buffer.length + incoming.length;
+    if (end + incoming.length <= store.length) {
+      store.set(incoming, end);
+      this.buffer = store.subarray(start, end + incoming.length);
+    } else if (needed <= store.length) {
+      store.copyWithin(0, start, end);
+      store.set(incoming, this.buffer.length);
+      this.buffer = store.subarray(0, needed);
+    } else {
+      const grown = new Uint8Array(Math.max(needed, store.length * 2));
+      grown.set(this.buffer);
+      grown.set(incoming, this.buffer.length);
+      this.store = grown;
+      this.buffer = grown.subarray(0, needed);
     }
   }
 

packages/web/test/runtime/chunk-reader.spec.ts

@@ -0,0 +1,130 @@
+/**
+ * ChunkReader growth (#3154). The reader used to reallocate-and-copy the
+ * whole buffer on EVERY network read, making one frame O(reads²): a 1 MiB
+ * argument payload delivered at the ~66 B reads a slow client actually
+ * produces cost ~200× the CPU of the same payload at normal read sizes,
+ * all of it blocking the event loop — bounded per request by bodySizeLimit
+ * on the server, unbounded on the client leg where the same reader decodes
+ * responses. The fix is amortized growth (append in tail room, compact the
+ * consumed prefix, reallocate at ≥2× only when outgrown); nothing about the
+ * framing, the bytes, or failure behavior changes.
+ *
+ * Timing assertions would be flaky, so the durable shape (suggested in the
+ * report) counts ALLOCATIONS: length-constructed Uint8Arrays during a
+ * drive must be O(log reads), which fails cleanly on the quadratic code
+ * (one per read) and passes on the fix.
+ */
+import { describe, expect, it } from "vitest";
+import { ChunkReader, createChunk } from "../../server-functions/src/shared.js";
+
+function concat(chunks: Uint8Array[]) {
+  const total = chunks.reduce((size, chunk) => size + chunk.length, 0);
+  const bytes = new Uint8Array(total);
+  let offset = 0;
+  for (const chunk of chunks) {
+    bytes.set(chunk, offset);
+    offset += chunk.length;
+  }
+  return bytes;
+}
+
+/** Streams `bytes` in `readSize`-byte deliveries, like a slow socket. */
+function streamOf(bytes: Uint8Array, readSize: number) {
+  let offset = 0;
+  return new ReadableStream<Uint8Array>({
+    pull(controller) {
+      if (offset >= bytes.length) return controller.close();
+      controller.enqueue(bytes.subarray(offset, Math.min(offset + readSize, bytes.length)));
+      offset += readSize;
+    }
+  });
+}
+
+/**
+ * Runs `drive` with the Uint8Array global replaced by a counting subclass:
+ * only length constructions (`new Uint8Array(n)`) count — subarray views
+ * construct from a buffer and stay free, matching what "an allocation"
+ * means for the growth strategy under test.
+ */
+async function countingAllocations<T>(drive: () => Promise<T>) {
+  const Native = globalThis.Uint8Array;
+  let allocations = 0;
+  let allocatedBytes = 0;
+  const Counting = class extends Native {
+    constructor(...args: any[]) {
+      super(...(args as [any]));
+      if (typeof args[0] === "number") {
+        allocations++;
+        allocatedBytes += args[0];
+      }
+    }
+  };
+  (globalThis as any).Uint8Array = Counting;
+  try {
+    const value = await drive();
+    return { value, allocations, allocatedBytes };
+  } finally {
+    globalThis.Uint8Array = Native;
+  }
+}
+
+async function drainAll(reader: InstanceType<typeof ChunkReader>) {
+  const frames: string[] = [];
+  await reader.drain((frame: string) => frames.push(frame));
+  return frames;
+}
+
+describe("ChunkReader growth (#3154)", () => {
+  it("delivers identical frames whatever the read granularity", async () => {
+    const payloads = ["a".repeat(50_000), "", JSON.stringify({ nested: [1, 2, 3] })];
+    const bytes = concat(payloads.map(createChunk));
+
+    // 7 lands read boundaries INSIDE the 12-byte header; 66 is what a slow
+    // client's coalesced deliveries actually measure; 16384 is a normal read
+    for (const readSize of [7, 66, 16_384, bytes.length]) {
+      const frames = await drainAll(new ChunkReader(streamOf(bytes, readSize)));
+      expect(frames).toEqual(payloads);
+    }
+  });
+
+  it("allocates O(log reads) for one large frame, not O(reads)", async () => {
+    const payload = "x".repeat(64 * 1024);
+    const bytes = concat([createChunk(payload)]);
+    const reads = Math.ceil(bytes.length / 66); // ~994
+
+    const { value, allocations, allocatedBytes } = await countingAllocations(() =>
+      drainAll(new ChunkReader(streamOf(bytes, 66)))
+    );
+
+    expect(value).toEqual([payload]);
+    // quadratic code: one allocation per read (~994) totalling ~32 MiB of
+    // copies; amortized doubling: ~log2(64 KiB) growths plus constants
+    expect(allocations).toBeLessThan(40);
+    expect(allocations).toBeGreaterThan(0);
+    expect(allocatedBytes).toBeLessThan(bytes.length * 8);
+  });
+
+  it("reaches a steady state across many small frames — drained frames recycle the store", async () => {
+    // next() consumes a frame by advancing the view; the compaction tier
+    // reclaims that prefix instead of growing, so a long multi-frame stream
+    // settles into zero new allocations per frame.
+    const payloads = Array.from({ length: 200 }, (_, i) => `frame-${i}-` + "y".repeat(300));
+    const bytes = concat(payloads.map(createChunk));
+
+    const { value, allocations } = await countingAllocations(() =>
+      drainAll(new ChunkReader(streamOf(bytes, 66)))
+    );
+
+    expect(value).toEqual(payloads);
+    expect(allocations).toBeLessThan(40);
+  });
+
+  it("still refuses a truncated stream loudly", async () => {
+    const bytes = concat([createChunk("complete"), createChunk("cut short")]);
+    const truncated = bytes.subarray(0, bytes.length - 5);
+
+    const reader = new ChunkReader(streamOf(truncated, 66));
+    expect((await reader.next()).value).toBe("complete");
+    await expect(reader.next()).rejects.toThrow("Malformed server function stream.");
+  });
+});