View
3.295
Download
0
Category
Preview:
Citation preview
Performance beyond Page load
CSS Conf Asia 2015
Let’s start with a small survey
How many of you like
animations in
Material Design?
But, you won’t like animations if they’re
NOT smooth
Rendering Performance
Goal: Build smooth interaction experiences
Let’s start with a Case Study
Marriage Proposal
Next thing?
E-Shopping
thoughwhat happened next...
Reaction
Bad performance of Shopping portal
which lead to..
Discussion of the performance impact
followed by actions
Wait
before that we need to understand what’s happeningtechnically, right?
Apoorv Saxena
Full stack Engineer, @apoorv_saxena
India
+ Workshops+ Meetups
Let’s start with Basics
BIOSCOPE
What is smooth interaction?
Devices refresh their screen 60 times a second and even more than that.
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.
10ms isn’t a lot of time
When failing to meet the frame budget of 10ms, we come across
Jank
Browser rendering process
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
Paint
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
Compositing
Performance impact of operations
Layout > Paint > Composite
How to analyse the performance of a
webpage
For use in Development
Chrome Dev Tools: FPS meter
Demo
Chrome Dev Tools:Enable paint flashing
Demo
Chrome Dev Tools: Timeline
Performance best practices
CPU
v
GPU● Not efficient in handling
graphics related operations.
JavaScript utilises CPU followed by GPU when manipulating DOM style.
s
● Optimized for handling Graphics operations.
CSS directly utilises GPU for applying CSS operations and thus hardware accelerated.
Rule of Thumb:
Use classes to update element styling instead of using JavaScript
Using CSS for element’s style manipulation:
var player = $(‘#player’);player.removeClass(‘move--left’);player.addClass(‘move--right’);
Using JS for element’s style manipulation:
var player = $(‘#player’);$(‘#player’).css({ left: ‘0px’, right: ‘10px’ });
Code:
Must follow:
I. Understand what impacts rendering performance (Profile)
II. Choose your CSS rules wisely
III. Avoid triggering layout / paint operation repeatedly or
when animating
IV. Prefer using transform and opacity changes (trigger only
composite operation) for animations
Reduce complexity of CSS selectors
Roughly 50% of the time used to calculate the computed style for an element is used to match selectors, and the other half of the time is used for constructing the RenderStyle (computed style representation) from the matched rules.
Rune Lillesveen, Opera / Style Invalidation in Blink
.title { /* styles */
}
// performant
.box:nth-last-child(-n+1)
.title { /* styles */
}
// less performant
Remove unusedCSS rules
CSS selector parsing is optimized, though unused CSS rules have a bigger performance impact
Automate using Gulp or Grunt tasks
Reduce number of elements being styled
Why to paint the entire body, when changes can/should be limited to that element
Example: Google.com
Measure your style recalculation cost
Possible Jank condition:
If a user hovers over a long list of <li> elements while scrolling
li:hover { background-color: red; /* Layout / Paint operation */
}
Reduce paint areas
Don’t paint unnecessarily. Avoid Union of Damaged regions.
CSS Animations
Use composite CSS operations inside keyframe definition such as transform and avoid triggering paint / layout operation
Debounce input handlers
e.g. disable hover event listener while scrolling
Example
Promote elements that update frequently
Caution: Don’t promote elements without profiling
Did you know?
Fixed elements having “position: fixed” property and scrollable elements, are
repainted by the browsers
Example
.moving-element { will-change: transform;}.moving-element { transform: translateZ(0);}
GIFs and Performance
Disable animation when not inside the viewport
Live Performance Audit
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.
Thanks.
Recommended