CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
changing visibility or adding an outline to an element. The actual process
of updating the screen is known as a paint.
Changes to your page (e.g. when JavaScript modifies CSS styles) invali-
date the rectangle you see on the screen and cause your browser to view it
as damaged.
A paint is an expensive operation but is also one that can be difficult
to avoid. You always need to draw something to the screen. The key is
to make sure the regions you’re painting (or repainting) are as small as
possible, otherwise you may experience jank. In Chrome, we keep an eye
on what in the screen needs to be changed, creating a damage rectangle
with the coordinates to parts of the page requiring repainting. We save the
old rectangle, prior to your changes, as a bitmap and then only paint the
delta between the new rectangle and the old one. If you notice that there
are particular areas of a page that require a lot of repainting, it’s useful to
investigate what can be done to reduce the painting cost.
On the Web, a low frame rate (and a janky experience) means that
individual frames being rendered by the browser can be made out by the
human eye. Giving users a jank-free experience often comes down to of-
fering an experience that can run at 60fps on sites and Web apps, not just
games and animations. At 60fps, you have 16.66ms to complete absolutely
everything for Chrome to display a frame of your page — that’s logic pro-
cessing, painting, layout, image decoding, compositing... everything. Once
you factor in miscellaneous browser processes, this number looks more
like 8–10ms and blowing this budget can mean your users are more likely
to see jank in their pages.
What’s magical about the number 60? Well, we say 60fps as this
matches the refresh rate of the devices we use today. Animations should
match the refresh rate of the device they are used on. Phones are usually
55–60Hz, laptops 58–60Hz (although 50Hz in low power mode), and most
monitors are 50–62Hz.
To hit 60fps, we sometimes need to go beyond JavaScript as the sole
performance bottleneck for our pages and spend more time investigating