Share
Embed
Slide 1
Slide 1 text
Know Your
Application Rendering
Inside Out
Jai Santhosh
Engineer, ClearTax
@jaisanth
Slide 2
Slide 2 text
Before we deep-dive…
Slide 3
Slide 3 text
Lets understand
The Critical Rendering Path
Slide 4
Slide 4 text
DOM
CSSOM
Render Tree
Layout
Paint
JavaScript
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
Go Paint!
Slide 8
Slide 8 text
Demo
Slide 9
Slide 9 text
But..
Slide 10
Slide 10 text
Good performance
is
“Not just loading fast”
but also
“Running Well”
Slide 11
Slide 11 text
The Rendering Lifecycle
Slide 12
Slide 12 text
JavaScript Style Layout Paint Composite
Typically…
Slide 13
Slide 13 text
But how long have I got?
Slide 14
Slide 14 text
Device Refresh Rates
Slide 15
Slide 15 text
Device Refresh Rates
✤ Most devices refresh your screen 60 times a second
✤ Which means practically 60 frames per second
✤ Which means per frame, we have ~16ms
Slide 16
Slide 16 text
Device Refresh Rates
✤ Most devices refresh your screen 60 times a second
✤ Which means practically 60 frames per second
✤ Which means per frame, we have ~16ms
Slide 17
Slide 17 text
Device Refresh Rates
✤ Frame Timing: When the frame needs to be ready by
✤ Frame Budget: How long to produce a frame
~16ms
Slide 18
Slide 18 text
Demo
Slide 19
Slide 19 text
Else we experience a
JANK
Slide 20
Slide 20 text
JavaScript Style Layout Paint Composite
Given that…
Slide 21
Slide 21 text
JavaScript Style Paint Composite
Paint Only changes…
Slide 22
Slide 22 text
JavaScript Style Composite
Ideally…
Slide 23
Slide 23 text
Debugging Janks…
Slide 24
Slide 24 text
JavaScript
Slide 25
Slide 25 text
JavaScript
Slide 26
Slide 26 text
JavaScript
Slide 27
Slide 27 text
JavaScript
Slide 28
Slide 28 text
JavaScript
Slide 29
Slide 29 text
How can we avoid this?
✤ requestAnimationFrame
Slide 30
Slide 30 text
How can we avoid this?
✤ requestIdleCallback
Slide 31
Slide 31 text
How can we avoid this?
✤ Offload heavy computation to a WebWorker
Slide 32
Slide 32 text
Style & Layout
Slide 33
Slide 33 text
Style & Layout
Slide 34
Slide 34 text
Layout Thrashing
Slide 35
Slide 35 text
Avoiding Layout Thrashing
Slide 36
Slide 36 text
Avoiding Layout Thrashing
Slide 37
Slide 37 text
Paint
Slide 38
Slide 38 text
Demo
Slide 39
Slide 39 text
Using Compositor-only Properties
✤ Try to use only transform and opacity
✤ Using will-change will force the element to a new layer
Slide 40
Slide 40 text
Understanding Layers
Slide 41
Slide 41 text
Demo
Slide 42
Slide 42 text
Using GPU Rasterization
✤ When enabled, some paint workloads can go from
100ms/frame to 4-5ms/frame.
Slide 43
Slide 43 text
tl;dr
✤ The Rendering LifeCycle
JavaScript -> Style -> Layout -> Paint -> Composite
✤ Janks and Long Frame Rates
✤ Debugging and Optimizing Janks
✤ Debugging Layers and enabling GPU Rasterisation
Slide 44
Slide 44 text
✤ Breaking down Pages to Pagelets
✤ More Code Execution means Long frame rates
✤ Native apps hold the edge as they are already in binary
✤ Remember Measure First, Optimize Later!
What next?
Slide 45
Slide 45 text
Thanks!!