By Addy Osmani CHAPTER 6The summary view (at the top of Timeline) displays horizontal bars
representing the network and HTML parsing (blue), JavaScript (yellow),
style recalculation and layout (purple), and painting and compositing
(green) events for your page. Repaints are browser events invoked by re-
sponses to visual changes such as window resizes or scrolls. Recalculations
occur when CSS properties are modified, while layout events (or reflows)
are due to changes in element position.
Know Your Tools
Before we dive into an efficient workflow for discovering and tweaking
rendering performance issues, there are a few other tools available at our
disposal in Chrome that are worth noting.
ShoRTCuT foR QuiCKlY hiDing DoM eleMenTS
DevTools has a useful shortcut allowing you to easily toggle setting
visibility:hidden on an element. When this style is applied to an element,
it isn’t painted but does maintain the page layout in an unchanged state.
To use the shortcut, select a DOM element in the Elements panel and
then press the H key. When paired with paint rectangles and Timeline, you
can easily evaluate which DOM elements are spending long on paint time.
Timeline also identifies when your application causes a forced
asynchronous layout and marks these records with a yellow warning icon.