perf(frontend): virtualize ResourceList rows (list view)
Large folders/collections rendered every row into the DOM, so memory and scripting time grew linearly with item count. A 20k-row list took ~12.5s to first paint, held ~380k DOM nodes / ~281MB JS heap, and scrolled at ~4fps. Add a reusable, dependency-free `VirtualList` that windows rows against the nearest scrollable ancestor (the existing `.content-area`), so the single-scrollbar UX, sticky header and end-of-list sentinel are unchanged. It reserves the full scroll height with a sized spacer and translates a small window of rows; row height is auto-measured for the single-column case. Wire it into ResourceList's flat list view (recent, favorites, shared, shared-with-me, trash, search). Grouped sections and grid view are unchanged for now and are the next callers of the same primitive. Measured in headless Chromium (1280x900) with synthetic rows, before/after: rows | mount→paint | DOM nodes | JS heap | scroll frame | jank frames ------+-------------+-----------+---------+--------------+------------ 1000 | 632→70 ms | 19k→351 | 16→2 MB | 17→17 ms | 0→0 5000 | 4401→54 ms | 95k→351 | 72→3 MB | 47→17 ms | 136→0 20000 | 12577→56 ms | 380k→351 |281→6 MB |258→17 ms | 1443→0 Rendered DOM and heap are now flat (O(visible)) regardless of dataset size; scroll holds 60fps with zero jank. Correctness verified by probing a mid-list scroll (rows land at the expected indices, positioned within the viewport). eslint: disable core `no-undef` for `.svelte` (TypeScript/svelte-check already resolve identifiers, including `<script generics>` type params it can't see). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01M8Vb9QHmLZnEMzHz7MrFy6
This commit is contained in:
@@ -24,11 +24,16 @@ export default ts.config(
|
||||
parserOptions: {
|
||||
parser: ts.parser
|
||||
}
|
||||
},
|
||||
// TypeScript + svelte-check already resolve identifiers (including `<script
|
||||
// generics>` type params, which core `no-undef` can't see). Defer to them.
|
||||
rules: {
|
||||
'no-undef': 'off'
|
||||
}
|
||||
},
|
||||
{
|
||||
// `static/` holds vendored, verbatim assets (the delta-upload worker and
|
||||
// the wasm-bindgen hash glue) — lint them as the upstream ships them.
|
||||
ignores: ['build/', '.svelte-kit/', 'package/', 'static/']
|
||||
ignores: ['build/', '.svelte-kit/', 'package/', 'static/', 'bench/']
|
||||
}
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user