Sprint 8: Performance Pipeline — Parallel Fetch, CSS/Image Filter, Virtual Clock 🚀 #59

New issue

Closed

opened 2026-06-18 13:11:37 +00:00 by Artur · 0 comments

Artur commented

2026-06-18 13:11:37 +00:00

Owner

Sprint 8: Performance Pipeline 🚀

Issue: #58
Epic: Phase 2 Production Engine
Aufwand: ~8h
Abhängigkeit: Sprint 7 (#57) — stabile Execution-Architektur

Problem

Aktuell werden Scripts seriell gefetched (1 nach dem anderen), CSS/Images werden sinnlos geladen, und die RAF-Schleife läuft bei ~1000fps. Das kostet ~50% Performance im Vergleich zu Chrome.

Lösung

1. Parallel Fetch Pipeline — Alle <script src> werden parallel gefetched, nicht seriell:

// Alle Fetch-Promises starten parallel:
const promises = scripts.map(s => fetch(s.src));
const contents = await Promise.all(promises.map(p => p.text()));
// Dann in korrekter Reihenfolge ausführen

2. CSS/Image Filter — Dateien die wir nicht brauchen gar nicht fetchen:

<link rel="stylesheet"> → kein Fetch (sofort onload)
<img src> → kein Fetch (leeres Image, sofort onload)
<source srcset> → kein Fetch
<video poster> → kein Fetch

3. Virtual Clock — RAF capped auf max 60fps, konfigurierbar:

// Parameter: maxFPS (default: 60, Range: 1-1000)
page = new Page({ maxFPS: 60 });

4. TCP Connection Pool — Wiederverwenden von HTTP-Verbindungen:

Bun's fetch() hat native Keep-Alive, aber wir öffnen pro Request neue Verbindungen
Eigenen Agent mit Connection Pool

5. Performance Metriken:

page.timing()  // → { fetchTime, execTime, totalTime, scriptCount, domSize }

Betroffene Dateien

Datei	Änderung
`src/js/script-loader.ts`	Parallel fetch statt seriell
`src/network/fetch.ts`	CSS/Image Filter, Connection Pool
`src/fakes/fast-raf.ts`	Configurable maxFPS
`src/pages/page.ts`	`timing()` API, `maxFPS` Option
`src/pages/stabilizer.ts`	Timing-Metriken

Akzeptanzkriterien

Alle externen Scripts werden parallel gefetched (kein serielles Warten)
CSS-Dateien: 0 Network-Requests (werden nicht gefetched)
Bilder: 0 Network-Requests (werden nicht gefetched)
RAF feuert maximal 60x/sec (konfigurierbar per maxFPS)
TCP-Verbindungen werden gepoolt (1 Connection pro Domain)
page.timing() gibt ms-genaue Metriken
Benchmark: 2x schneller als Chrome auf corpus/react-sites
Bestehende Tests: 0 Regressionen

## Sprint 8: Performance Pipeline 🚀 **Issue:** #58 **Epic:** Phase 2 Production Engine **Aufwand:** ~8h **Abhängigkeit:** Sprint 7 (#57) — stabile Execution-Architektur ### Problem Aktuell werden Scripts seriell gefetched (1 nach dem anderen), CSS/Images werden sinnlos geladen, und die RAF-Schleife läuft bei ~1000fps. Das kostet ~50% Performance im Vergleich zu Chrome. ### Lösung **1. Parallel Fetch Pipeline** — Alle `<script src>` werden parallel gefetched, nicht seriell: ```typescript // Alle Fetch-Promises starten parallel: const promises = scripts.map(s => fetch(s.src)); const contents = await Promise.all(promises.map(p => p.text())); // Dann in korrekter Reihenfolge ausführen ``` **2. CSS/Image Filter** — Dateien die wir nicht brauchen gar nicht fetchen: - `<link rel="stylesheet">` → kein Fetch (sofort `onload`) - `<img src>` → kein Fetch (leeres Image, sofort `onload`) - `<source srcset>` → kein Fetch - `<video poster>` → kein Fetch **3. Virtual Clock** — RAF capped auf max 60fps, konfigurierbar: ```typescript // Parameter: maxFPS (default: 60, Range: 1-1000) page = new Page({ maxFPS: 60 }); ``` **4. TCP Connection Pool** — Wiederverwenden von HTTP-Verbindungen: - Bun's `fetch()` hat native Keep-Alive, aber wir öffnen pro Request neue Verbindungen - Eigenen `Agent` mit Connection Pool **5. Performance Metriken:** ```typescript page.timing() // → { fetchTime, execTime, totalTime, scriptCount, domSize } ``` ### Betroffene Dateien | Datei | Änderung | |-------|----------| | `src/js/script-loader.ts` | Parallel fetch statt seriell | | `src/network/fetch.ts` | CSS/Image Filter, Connection Pool | | `src/fakes/fast-raf.ts` | Configurable maxFPS | | `src/pages/page.ts` | `timing()` API, `maxFPS` Option | | `src/pages/stabilizer.ts` | Timing-Metriken | ### Akzeptanzkriterien - [ ] Alle externen Scripts werden parallel gefetched (kein serielles Warten) - [ ] CSS-Dateien: 0 Network-Requests (werden nicht gefetched) - [ ] Bilder: 0 Network-Requests (werden nicht gefetched) - [ ] RAF feuert maximal 60x/sec (konfigurierbar per `maxFPS`) - [ ] TCP-Verbindungen werden gepoolt (1 Connection pro Domain) - [ ] `page.timing()` gibt ms-genaue Metriken - [ ] Benchmark: 2x schneller als Chrome auf corpus/react-sites - [ ] Bestehende Tests: 0 Regressionen

Artur added the

feature

label

2026-06-18 13:11:37 +00:00