By Addy Osmani CHAPTER 6lot of areas that require painting and compositing. Doing this more than
you absolutely need to is a terrible idea. In the case of scrolling, you can
solve this by debouncing your scroll events. This is done by storing the last
known scroll value in a variable whenever you get a scroll event and then
making your visual updates in a requestAnimationFrame using the last
known value. This will minimize layout thrashing.
This lets the browser schedule visual updates at the right time and do
no more work than necessary in each individual frame. For more advice on
optimizing scrolling and parallax^15 , make sure to check Paul Lewis’s articles.
Diagnosing Slow Paint Times
As we’ve discussed, the browser has to do a lot of work in order to draw
things to the screen. Anything you do to increase the complexity of that
task (like forcing the entire layout of the page to be recalculated) has the
potential to introduce jank to your pages. You want to avoid this. So, let’s
talk about some tools that can help you measure these slowdowns.
Note: At the time of writing, Opera uses the same front-end developer tools as
Chrome DevTools, so many of the tools mentioned in this chapter will be available
there too. This may change over time.
DevToolS PeRfoRManCe ToolS
In Chrome, the DevTools Timeline panel provides an overview of where
time is spent loading up your Web application, such as how long it takes to
process DOM events, render page layouts or paint elements to the screen.
It allows you to drill down into three separate facets that can help you
discover why your application is slow: events; frames; and actual memory
usage. Right now, we’re interested in frames mode, which gives you in-
sight into the tasks the browser had to perform to generate a single frame
(update) of your application for presentation on the screen.