Slow "Paint" record in Chrome Timeline

[krist...@gmail.com]

I'm looking at a paint-event that takes ~500ms and I'm trying to figure out what causes is to be so slow.

What exactly are the "paint" events recorded in the timeline, and is it possible to dig down further to see what causes one of them to be slow?

If not, what would typically slow down painting? Heavy use of css (box shadow, border radius, etc.), a lot of nested elements, or something else?

-- Jacob

[krist...@gmail.com]

Turns out I was loading the wrong resolution of a couple of pictures which subsequently was re-sized and painted (i guess?)

I'm still interested in more details about the paint records though ;)

[Andrey Kosyakov]

On Fri, Jun 15, 2012 at 4:21 PM, <krist...@gmail.com> wrote:
> I'm looking at a paint-event that takes ~500ms and I'm trying to figure out
> what causes is to be so slow.
>
> What exactly are the "paint" events recorded in the timeline, and

Technically, these are normally caused by rendering layers being
painted during compositing.

> is it possible to dig down further to see what causes one of them to be slow?

Not at the moment, but we're working on it. The best you can have for
the time being is the paint rectangle being shown upon hover over the
Paint event in timeline.

> If not, what would typically slow down painting? Heavy use of css (box
> shadow, border radius, etc.), a lot of nested elements, or something else?

Among the most common causes is either a large area to paint or large
graphics (e.g. JPEG or a PNG) -- image decoding/scaling is also
accounted as "paint"

[Andrey Kosyakov]

On Fri, Jun 15, 2012 at 4:41 PM, <krist...@gmail.com> wrote:
> Turns out I was loading the wrong resolution of a couple of pictures which
> subsequently was re-sized and painted (i guess?)

Yep. We're looking to make it a separate event :)

Best regards,
Andrey.

[krist...@gmail.com]

Awesome, thanks for the quick answer!

On Friday, June 15, 2012 2:43:44 PM UTC+2, Andrey Kosyakov wrote: