CHAPTER 6 Finding and Fixing Mobile Web Rendering Issues
Particularly on sites that rely heavily on scroll, you might discover
that your main content is relying on overflow:scroll. This is a real chal-
lenge as this scrolling isn’t GPU-accelerated in any way so the content is
repainted whenever your user scrolls. You can work around such issues
using normal page scroll (overflow:visible) and position:fixed.Timeline Reference
- Composite layer: Chrome’s rendering engine composited image
layers. - Image decode: an image resource was decoded.
- Image resize: an image was resized from its native dimensions.
- Paint: composited layers were painted to a region of the display.
Hovering over a Paint record highlights the region of the display
that was updated. - Invalidate layout: the page layout was invalidated by a DOM change.
- Layout: a page layout was executed.
- Recalculate style: Chrome recalculated element styles.
- Scroll: the content of nested view was scrolled.
Remember, though, to test on both desktop and mobile: their perfor-
mance characteristics vary wildly. Use the timeline in both, and watch your
paint time chart in Continuous Paint mode to evaluate how fast you’re
busting your budget. Again, don’t use this hack on every element on the
page – it might pass muster on desktop, but it won’t on mobile. The reason
is that there is increased video memory usage and an increased layer man-
agement cost, both of which could have a negative impact on performance.
Instead, use hardware compositing only to isolate elements where the
paint cost is measurably high.