Talk presented at CSS Conf Asia 2015 regarding "Performance beyond Page load" i.e. Rendering performance of your webpage. The talk focused upon the impact of CSS rules and operations upon the rendering performance of a webpage.
21. 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.
46. 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.
47. Rule of Thumb:
Use classes to update element styling instead of using
JavaScript
48. 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:
50. 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
52. 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
54. Remove unused
CSS rules
CSS selector parsing is optimized, though unused CSS rules
have a bigger performance impact
Automate using Gulp or Grunt tasks
55. Reduce number of
elements being styled
Why to paint the entire body, when changes can/should be
limited to that element
Example: Google.com
57. Possible Jank condition:
If a user hovers over a long list of
<li> elements while scrolling
li:hover {
background-color: red;
/* Layout / Paint operation */
}
70. 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.