performance beyond page load (jquery conference)
TRANSCRIPT
Performance beyondPage Load
Apoorv Saxena
@apoorv_saxena
Kickstart the talk!
Let the data speak!
Not impressed ?
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.
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.
Jank
When failing to meet the frame budget of 10ms, we come across
Rendering PerformanceLet’s build smooth interaction experiences
16ms isn’t a lot of time
In a Nutshell..
Pixel Pipeline
Layout
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
Painting
color border-style
visibility background
text-decoration background-image
background-position background-repeat
outline-color outline
outline-style border-radius
background-size box-shadow
Composting
Tools at hand
FPS meter
Profiling with Timeline
Show Paint Rectangles
Things we intend to achieve
Smooth Scrolling
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.
Smooth Animation
What can cause Jank during animation?
Triggering any other operation that can cause the animation to exceed its frame
budget.
Smooth Interaction
What can cause Jank during interaction with page?
Synchronous operation(s) inside the event handler that exceeds the current frame
budget.
Best practices related to Rendering Performance
Avoid Memory Leaks
Reducing DOM callsWriting / Reading frequently to/from DOM is a bad
practice
Forced Synchronous LayoutDOM write operation followed by a DOM read operation
for a layout property of a DOM element
Layout ThrashingForced synchronous layout in quick succession
Demo: Animations example
How to avoid Layout Thrashing
Library: FastDomEliminates layout thrashing by batching DOM
read/write operations,
Debounce Input Handlers
Reduce Paint Areas
Avoid Paint Storms
How to run Animations at 60fps ?
GPU Acceleration
Canvas is hardware accelerated
JS Animations
GIFs and Performance
Thank you.