Layout, målning och komposition: renderingspipelinen

När render-trädet har byggts kör webbläsaren tre steg: Layout (beräkning av elementens storlek och positioner), Paint (ifyllning av pixlar med färger, text och bilder) och Composite (kombinering av målade lager och visning av dem på skärmen).

Layout beräknar geometrin – bredd, höjd och x/y-position – för varje element. Om egenskaper som påverkar geometrin ändras (width, margin, padding, font-size, position) utlöses layout för elementet och potentiellt hela dess underträd – det mest kostsamma steget.

Paint fyller pixlar för varje lager: bakgrunder, kantlinjer, text och skuggor. Om color, background-color, visibility eller border-radius ändras utlöses en ommålning utan ny layout – billigare än layout, men fortfarande kostsamt om ett stort område målas om.

Compositorn kombinerar lager med hjälp av GPU:n. CSS-egenskaper som endast påverkar compositing – transform och opacity – kan animeras utan att utlösa layout eller paint. GPU:n hanterar dem med 60 FPS och minimal användning av CPU:n.

csstriggers.com (numera dokumentation på webbläsarsidan) dokumenterar vilka CSS-egenskaper som utlöser layout, paint och/eller composite i varje webbläsarmotor. Använd den för att granska animeringsegenskaper. Föredra transform/opacity för animerade egenskaper.

Layout thrashing uppstår när JavaScript växlar mellan att läsa layoutegenskaper (offsetWidth) och skriva stilegenskaper i en loop. Varje skrivning ogiltigförklarar layouten och varje läsning tvingar fram en synkron reflow. Samla alla läsningar före alla skrivningar för att undvika thrashing.

Endast transform och opacity hanteras helt av compositorn när elementet ligger på ett eget lager. Animering av alla andra egenskaper – även left/top – utlöser layout eller paint på huvudtråden och kan orsaka hackig återgivning.

Webbläsare flyttar element till ett eget GPU-lager när de har will-change: transform, en CSS-animering av transform/opacity, fixed position med kompositerande grannar eller en 3D-transformering. Varje lager använder GPU-minne – för många lager skapar minnespress.

En målningsstorm uppstår när en stor del av sidan målas om i varje bildruta. Profilera i Chrome DevTools → Rendering → Paint flashing för att identifiera områden som målas om. Isolera element som animeras ofta på egna lager för att begränsa området som målas om.

Spela in en prestandaprofil i Chrome DevTools. Flödesdiagrammet visar händelserna Layout, Update Layer Tree, Paint och Composite. Långa staplar för layout eller målning indikerar flaskhalsar. Sikta på bildrutetider under 16 ms för att bibehålla 60 fps.

Använd transform och opacity för animeringar när det är möjligt. Använd clip-path i stället för width/height för animeringar som visar innehåll — clip-path är anpassat för kompositorn i moderna webbläsare. Undvik att animera box-shadow; använd i stället opacity tillsammans med ett pseudo-element med en förhandsrenderad skugga.

Renderingspipelinen — Layout, Paint, Composite — avgör animeringens prestanda. Layout är mest kostsamt, målning är måttligt kostsamt och egenskaper som endast påverkar kompositorn (transform, opacity) hanteras av GPU:n. Genom att förstå vad som utlöser de olika stegen kan ni skapa mjuka animeringar i 60 fps utan upprepade layoutberäkningar eller målningsstormar.