Les Labs / Frontend
FrontendAdvanced~10h
Virtualized List Rendering 10k+ Rows at 60fps
A windowed list component that renders only the visible slice of a 10,000+ row dataset, recycling DOM nodes as the user scrolls instead of mounting every row. It supports variable row heights, keyboard scrolling, and a measured scroll-position cache so jumping to an arbitrary index doesn't jank.
Ce que ça prouve
La phrase que vous pouvez défendre en entretien.
Ligne de CV
Built a from-scratch virtualized list renderer (no react-window) handling 10k+ rows with sub-16ms frame times, verified with Chrome DevTools performance traces and a Playwright scroll-jank regression test.
- can profile and eliminate render bottlenecks
- understands DOM recycling and windowing math
- writes performance tests, not just performance claims
Le brief
Ce que vous construisez, étape par étape.
- 01Render only rows intersecting the viewport plus a configurable overscan buffer, never mounting the full dataset
- 02Support variable, unknown-until-measured row heights via ResizeObserver without layout thrashing
- 03Maintain scroll-position accuracy when jumping to an arbitrary row index (e.g. index 8,432) with no visible flash
- 04Recycle DOM nodes (pool reuse) instead of creating/destroying nodes on every scroll frame
- 05Keep scripting + rendering under 16ms per frame during continuous fast scroll, measured via a Performance trace
- 06Support keyboard navigation (arrow keys, Page Up/Down, Home/End) that moves focus and scrolls correctly
La preuve
C’est terminé quand ces critères sont validés.
Automated Playwright test scrolls 10,000 rows end-to-end and asserts no dropped frames beyond a defined budget
automated test
Unit tests cover the windowing math (visible range calculation, overscan, variable-height offset cache) for edge cases like resize mid-scroll
automated test
Chrome DevTools performance trace exported showing sub-16ms frame times during fast scroll, committed as an artifact
artifact
Code review confirms no unnecessary re-renders via React DevTools profiler flame chart
reviewed
Stack
ReactTypeScriptResizeObserverChrome DevTools Performance panelPlaywright
Sage Method
frame → decide → prove
Vous conservez
Standalone virtualized-list npm-installable component with a live 10k-row demo page and a committed performance trace report