1.
Performance beyond
Page Load
Apoorv Saxena

2.
@apoorv_saxena

3.
Kickstart the talk!

4.
Let the data speak!

5.
Not impressed ?

6.
At EdgeConf 2012,
Facebook confirmed this when it
mentioned that in an A/B test, it slowed
down scrolling from 60fps to 30fps,
causing engagement to collapse.

7.
What is smooth interaction?
Devices refresh their screen 60 times a second.
Thus, frame budget for smooth interaction is 16ms
(1 second / 60 frames = 16.66 ms / frame)
Though, browser has got some householding work as well,
which leaves us with about 10ms in total.

8.
Jank
When failing to meet the frame budget of
10ms, we come across

9.
Rendering Performance
Let’s build smooth interaction experiences

10.
16ms isn’t a lot of time

11.
In a Nutshell..

12.
Pixel Pipeline

13.
Layout

14.
width overflow height
padding font-family margin
display vertical-align border-width
border clear top
position bottom font-size
float left text-align
overflow-y right line-height
font-weight white-space min-height

15.
Painting

16.
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow

17.
Composting

18.
Tools at hand

19.
FPS meter

20.
Profiling with Timeline

21.
Show Paint Rectangles

22.
Things we intend to achieve

23.
Smooth Scrolling

24.
What can cause Jank during scroll?
Processing that consumes more than 16ms:
● Time consuming operations e.g. Garbage Collection event.
● JavaScript triggered operations that consume lot of time e.g.
Layout Thrashing
● Loads of repainting on the screen, reason can be attributed
to JS / CSS or both.

25.
Smooth Animation

26.
What can cause Jank during animation?
Triggering any other operation that can
cause the animation to exceed its frame
budget.

27.
Smooth Interaction

28.
What can cause Jank during interaction with page?
Synchronous operation(s) inside the event
handler that exceeds the current frame
budget.

29.
Best practices related to
Rendering Performance

30.
Avoid Memory Leaks

31.
Reducing DOM calls
Writing / Reading frequently to/from DOM is a bad
practice

32.
Forced Synchronous Layout
DOM write operation followed by a DOM read operation
for a layout property of a DOM element

33.
Layout Thrashing
Forced synchronous layout in quick succession
Demo: Animations example

34.
How to avoid
Layout Thrashing

35.
Library: FastDom
Eliminates layout thrashing by batching DOM
read/write operations,

36.
Potential Scroll Bottlenecks
Demo: Repaint on Scroll

37.
Debounce Input Handlers

38.
Reduce Paint Areas

39.
Avoid Paint Storms

40.
How to run Animations at
60fps ?

41.
GPU Acceleration

42.
Canvas is
hardware accelerated

43.
JS Animations

44.
CSS Animations
Demo: SnowFlake Animation

45.
Style Calculations
Reference: CSSTriggers.com

46.
Web Animations API
Demo: SnowFlake Animation

47.
GIFs and Performance

48.
Performance Audit
Materialup

49.
Performance Audit
Time

50.
Thank you.