This document discusses strategies for optimizing browser rendering performance, including: - Avoiding forced synchronous layouts by pre-computing values and using requestAnimationFrame. - Using will-change to hint where transforms will occur and create layers. - Splitting long JavaScript tasks and using web workers to avoid blocking the main thread.

1. Super smooth
animations

2. ExpectationExpectation

3. RealityReality

4. Battery drainBattery drain

5. DeviceDevice
overheatingoverheating

6. MaillardMaillard

7. Giacomo ZinettiGiacomo Zinetti
@gcmznt@gcmznt

8. How browserHow browser
renders?renders?

9. RenderRender
cyclecycle
JavaScriptJavaScript
StyleStyle
LayoutLayout
PaintPaint
CompositeComposite

10. Our logicOur logic
JavaScriptJavaScript
StyleStyle
LayoutLayout
PaintPaint
CompositeComposite

11. marginmargin
paddingpadding
ReflowReflow
JavaScriptJavaScript
StyleStyle
LayoutLayout
PaintPaint
CompositeComposite

12. colorcolor
backgroundbackground
RepaintRepaint
JavaScriptJavaScript
StyleStyle
LayoutLayout
PaintPaint
CompositeComposite

13. transformtransform
opacityopacity
ComposeCompose
JavaScriptJavaScript
StyleStyle
LayoutLayout
PaintPaint
CompositeComposite

14. CSSCSS

15. AnimateAnimate
compositor-onlycompositor-only
propertiesproperties

16. Execute long JS task Start heavy JS loop
Left
Translate

17. Create layersCreate layers
will-changewill-change

18. ❌❌
* {* {
will-change: transform; will-change: transform;
}}

19. Disable hoverDisable hover
on scrollon scroll

20. JSJS

21. Avoid forcedAvoid forced
synchronoussynchronous
layoutlayout

22. ❌❌
elements.forEach(el => {elements.forEach(el => {
el.querySelector('img').style.width el.querySelector('img').style.width
= `${el.offsetWidth}px`; = `${el.offsetWidth}px`;
})})

23. elements.forEach((el, i) => {elements.forEach((el, i) => {
ws[i] = el.offsetWidth; ws[i] = el.offsetWidth;
})})
elements.forEach((el, i) => {elements.forEach((el, i) => {
el.querySelector('img').style.width el.querySelector('img').style.width
= `${ws[i]}px`; = `${ws[i]}px`;
})})

24. rAFrAF
requestAnimationFrame()requestAnimationFrame()

25. rICrIC
requestIdleCallback()requestIdleCallback()

26. Split big tasksSplit big tasks

27. Web workersWeb workers

28. TARGETTARGET
RAILRAIL

29. Response <100msResponse <100ms
Animation <16msAnimation <16ms
Idle <50msIdle <50ms
Load <1000msLoad <1000ms

30. FLIPFLIP
by @aerotwistby @aerotwist

31. FirstFirst
const first =const first =
el.getBoundingClientRect(); el.getBoundingClientRect();

32. LastLast
el.classList.toggle('end');el.classList.toggle('end');
const last =const last =
el.getBoundingClientRect(); el.getBoundingClientRect();

33. InvertInvert
const invert =const invert =
first.height / last.height; first.height / last.height;

34. PlayPlay
el.animate([el.animate([
{ transform: `scale(${invert}px)` }, { transform: `scale(${invert}px)` },
{ transform: 'scale(0)' } { transform: 'scale(0)' }
], 300);], 300);

35. First First
Last Last
InvertInvert
Play Play

37. ContentContent
VSVS
AnimationsAnimations

38. Users!Users!

39. The best animationThe best animation
is the invisible oneis the invisible one
Thank youThank you

40. LinksLinks
This slides
Codepen examples
Feedbacks are welcome!
Web Fundamentals: Performance
CSS Triggers
FLIP by @aerotwist