HTML & CSS · Senior · Question 46 of 75
A 10,000-row table lags when scrolling. Which solution is most effective?
- 1Add
will-change: transformto every table row - ✓Correct answer: Virtualization: render only the visible rows plus a small buffer
- 3Replace
<table>with a<div>grid using CSS Grid andgap
Explanation
The main problem is thousands of DOM nodes: memory, layout and styles. Virtualization (TanStack Virtual, react-window) keeps dozens of rows in the DOM and swaps them while scrolling. will-change on thousands of elements eats memory. Changing the markup doesn't reduce node count. Simpler alternatives are pagination or content-visibility.