CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
ConTinuouS PainTing MoDe foR DiagnoSing Slow STYleS
Some of the reasons Chrome repaints areas of the page include: user in-
teractions that cause style changes to DOM elements; DOM nodes being
changed (forcing layout recal-
culation); and any other oper-
ations which cause the layout
of the page to be changed.
It can be useful to under-
stand why repaints occur in
your page. “Continuous page
repainting” is a feature in the
Settings panel which helps
identify elements that have a
high paint cost on the page. It
forces the page into constant-Walking through the DOM tree in the Elements panel, the H shortcut key helps
identify elements with heavy paint.Keep an eye on the black and green counter in the
top-right corner for insights into repaints.