Prípadová štúdia
Dashboard Performance Optimization
Eliminácia blokovania hlavného vlákna v dátovo náročnom analytickom dashboarde renderujúcom tisíce riadkov a real-time aktualizácie.
Problém
Dashboard renderoval 5 000+ riadkov v jednom nevirtualizovanom strome komponentov. Počiatočné načítanie blokovalo hlavné vlákno viac ako 3 sekundy. Triedenie alebo filtrovanie spúšťalo plný re-render, čo robilo rozhranie nefunkčným. Používatelia začali hlásiť dashboard ako nepoužiteľný na menej výkonnom hardvéri.
Prístup
Pred zmenou akéhokoľvek kódu som profiloval strom komponentov pomocou Vue DevTools a Chrome Performance panelu. Identifikoval som tri príčiny: nevirtualizované renderovanie zoznamov, zbytočné prehodnocovanie computed vlastností pri nesúvisiacich zmenách stavu a synchronné dátové transformácie bežiace na hlavnom vlákne. Opravil som ich v poradí podľa dopadu.
Architektúra
- Frontend: Vue 3 s cielenou, nameranú optimalizáciou
- Renderovanie zoznamov: Virtuálny scrolling cez vue-virtual-scroller
- Spracovanie dát: Web Worker pre operácie triedenia a filtrovania
- Stav: Computed vlastnosti s explicitným, úzkym sledovaním závislostí
- Code splitting: Chart komponenty načítané cez defineAsyncComponent
Kľúčové rozhodnutia
Virtuálny scrolling len tam, kde to nameráme
Nie každý zoznam potreboval virtualizáciu. Aplikoval som ju len na tabuľky s viac ako 500 riadkami po profilovaní. Vyhol som sa pridávaniu abstrakčnej zložitosti tam, kde bol výkonnostný zisk zanedbateľný.
Web Worker pre dátové transformácie
Presunutie logiky filtrovania a triedenia z hlavného vlákna eliminovalo trhanie UI počas náročných operácií. Workery komunikovali cez structured clone — žiadne race conditions so zdieľaným stavom.
Code-split chart komponenty
Knižnice grafov tvorili veľkú časť počiatočného balíka. Ich lazy načítanie znížilo veľkosť balíka o 34% a priamo zlepšilo TTI.
Najprv profilovanie, potom optimalizácia
Každá zmena bola predchádzaná meraním. To zabránilo mrhaniu úsilím na už rýchle komponenty a udržalo diff malý, prehľadný a ľahko zvratiteľný.
Výsledok
Time to Interactive klesol o 41%. Blokovanie hlavného vlákna počas interakcií kleslo z 3s+ na menej ako 200ms. Sťažnosti používateľov na zamŕzanie prestali po prvom nasadení. Dashboard teraz zvláda 10 000+ riadkov bez degradácie.
Tech stack
Čo by som zlepšil
- Presunúť real-time dáta na WebSocket spojenie pre nižšiu latenciu aktualizácií
- Pridať server-side stránkovanie pre zníženie počiatočného dátového payloadu na pomalých pripojeniach