Chrome DevTools Timeline Update Layer Tree Event

Question

I'm building animation/transition heavy web app with a lot of content. There are a lot of composition layers in the app since everything is moved/animated using css transforms. I'm trying to debug the app to find out rendering bottlenecks and I've noticed a lot of "Update Layer Tree" events in Chrome DevTools -> Timeline -> Frames mode like:

Does anybody have an idea what could be causing this? What does "Update Layer Tree" exactly stand for?

Answer 1

First you have to understand what a Render Layer is. The Render Layer is the browsers representation of how to render that node and how it relates to other nodes with the same coordinate space to deal with things like overlapping content, painting etc. The Update Layer Tree could be happening from a number of different things. For example if you use javascript to set a style on an element the Layer Tree will need to be computed and updated. Or maybe it has to sync the Layer Tree between the compositors thread ( where textures get loaded to the GPU ) and the main thread ( where the javascript runs ).

In your case, I would guess that you are triggering a fundamental layer invalidation that is forcing it to update a layer high up on the tree hierarchy which is then trickling down the tree and causing each of those layers to be updated. Although its hard to say without looking at your code.

Either way if this long Update Layer Tree is consistently happening before the Layout is being recalculated, it's most certainly related to that.

Here are some resources to get you started.

Read This HTML5 Rocks article about the browsers Layers. Accelerated Rendering in Chrome

or this other HTML5 Rocks article about compositing. High Performance Animations

And if you want a deep understanding of how chrome renders a page and utilizes the GPU in that process. There is a great article on the Chromium blog about it. GPU Accelerated Compositing in Chrome

Good luck.