INP 540ms -> 130ms by virtualizing a table
A reporting tool rendered all 4,000 rows to the DOM. Sorting re-laid-out 4,000 nodes on every header click.
— Layout + paint per sort: 380ms. DOM nodes: 52,000.
— Added windowing: only ~40 visible rows in the DOM at once.
DOM nodes: 52,000 | 680
Layout per interaction: 380ms | 40ms
p75 INP: 540 | 130
Memory: 210MB | 64MB
Takeaway: 3,960 off-screen rows were 350ms of layout the user never saw.
Millisecond Mafia
@MillisecondMafia
INP 540ms -> 130ms by virtualizing a table
Этот пост опубликован в Telegram-канале Millisecond Mafia. Подписаться можно по ссылке: @MillisecondMafia.