Know Your Application Rendering Inside Out

This talk focuses on the What and the How to measure your Web Application Rendering performance and the right tools needed for your armoury.

Transcript

1. Know Your Application Rendering Inside Out Jai Santhosh Engineer, ClearTax @jaisanth
2. Before we deep-dive…
3. Lets understand The Critical Rendering Path
4. DOM CSSOM Render Tree Layout Paint JavaScript
7. Go Paint!
8. Demo
9. But..
10. Good performance is “Not just loading fast” but also “Running Well”
11. The Rendering Lifecycle
12. JavaScript Style Layout Paint Composite Typically…
13. But how long have I got?
14. Device Refresh Rates
15. 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
16. 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
17. Device Refresh Rates ✤ Frame Timing: When the frame needs to be ready by ✤ Frame Budget: How long to produce a frame ~16ms
18. Demo
19. Else we experience a JANK
20. JavaScript Style Layout Paint Composite Given that…
21. JavaScript Style Paint Composite Paint Only changes…
22. JavaScript Style Composite Ideally…
23. Debugging Janks…
24. JavaScript
25. JavaScript
26. JavaScript
27. JavaScript
28. JavaScript
29. How can we avoid this? ✤ requestAnimationFrame
30. How can we avoid this? ✤ requestIdleCallback
31. How can we avoid this? ✤ Offload heavy computation to a WebWorker
32. Style & Layout
33. Style & Layout
34. Layout Thrashing
35. Avoiding Layout Thrashing
36. Avoiding Layout Thrashing
37. Paint
38. Demo
39. Using Compositor-only Properties ✤ Try to use only transform and opacity ✤ Using will-change will force the element to a new layer
40. Understanding Layers
41. Demo
42. Using GPU Rasterization ✤ When enabled, some paint workloads can go from 100ms/frame to 4-5ms/frame.
43. 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
44. ✤ 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?
45. Thanks!!