Why Recalculate Style->Update Layer Tree->Compositing Layer occurs multliple times during one frame?

[hongb...@chromium.org]

As the title showed, when I try to profile my H5 app with DevTools, I found the loop Recalculate Style ->Update Layer Tree->Composite Layer would occur multiple times, as the attachment showed.

Is it an expected situation? How to explain it, and how to avoid if it is out of expectation? I suppose there are all happened in one frame time.

Thanks in advance.

Hongbo

[Andrey Kosyakov]

[chromium-dev to bcc]

The signal that we use for frame boundaries is emitted when the compositor actually draws layers, and there are plenty of opportunities for the compositor to bail out before actually drawing, most common being the update being outside of view-port.

So the flow in your case is likely as this:

- you invalidate styles;

- the main thread requests a frame from the impl side;

- the impl side begins a frame and requests a main thread frame;

- the main thread performs style recalc/layout/update layer tree;

- it turns out there are no invalidations within the visible area;

- frame is not drawn.

(the above is repeated several times, then something is actually drawn, and at this point we mark next frame boundary in Timeline).

Best regards,

Andrey.

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-develo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/446ef986-c746-40cd-a167-5958082b1312%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[hongb...@chromium.org]

Very helpful explanation. Thanks very much!

On Wednesday, May 27, 2015 at 1:23:14 AM UTC+8, Andrey Kosyakov wrote:

[chromium-dev to bcc]

The signal that we use for frame boundaries is emitted when the compositor actually draws layers, and there are plenty of opportunities for the compositor to bail out before actually drawing, most common being the update being outside of view-port.

So the flow in your case is likely as this:

- you invalidate styles;

- the main thread requests a frame from the impl side;

- the impl side begins a frame and requests a main thread frame;

- the main thread performs style recalc/layout/update layer tree;

- it turns out there are no invalidations within the visible area;

- frame is not drawn.

(the above is repeated several times, then something is actually drawn, and at this point we mark next frame boundary in Timeline).

Best regards,

Andrey.

On Tue, May 26, 2015 at 7:06 PM, <hongb...@chromium.org> wrote:

As the title showed, when I try to profile my H5 app with DevTools, I found the loop Recalculate Style ->Update Layer Tree->Composite Layer would occur multiple times, as the attachment showed.

Is it an expected situation? How to explain it, and how to avoid if it is out of expectation? I suppose there are all happened in one frame time.

Thanks in advance.

Hongbo

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

[hongb...@chromium.org]

One more question, how much does such a pattern (repeated css style->update layer tree-> compositing layer) impact on performance? I mean, if those repeated actions happens in one frame, and will block the next frame, won't it hurt the smoothness?

On Wednesday, May 27, 2015 at 1:23:14 AM UTC+8, Andrey Kosyakov wrote:

[chromium-dev to bcc]

The signal that we use for frame boundaries is emitted when the compositor actually draws layers, and there are plenty of opportunities for the compositor to bail out before actually drawing, most common being the update being outside of view-port.

So the flow in your case is likely as this:

- you invalidate styles;

- the main thread requests a frame from the impl side;

- the impl side begins a frame and requests a main thread frame;

- the main thread performs style recalc/layout/update layer tree;

- it turns out there are no invalidations within the visible area;

- frame is not drawn.

(the above is repeated several times, then something is actually drawn, and at this point we mark next frame boundary in Timeline).

Best regards,

Andrey.

On Tue, May 26, 2015 at 7:06 PM, <hongb...@chromium.org> wrote:

As the title showed, when I try to profile my H5 app with DevTools, I found the loop Recalculate Style ->Update Layer Tree->Composite Layer would occur multiple times, as the attachment showed.

Is it an expected situation? How to explain it, and how to avoid if it is out of expectation? I suppose there are all happened in one frame time.

Thanks in advance.

Hongbo

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.

To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.