Which actions trigger 'Update layer tree'?

Question

Could someone help me to figure out which actions trigger the action 'Update layer tree'? And what impact does 'Update layer tree' have on page load duration?

Answer 1

Check out https://csstriggers.com/

This is a tool created by a couple of google engineers (Paul and Surma) that answers the question "If I change a specific CSS property, what work will the browser be forced to do?" Browser work is split into three main areas (layout, paint, and composite), and this tool states what is triggered by which CSS properties in different browsers. Note that there are some issues with Webkit and Gecko reported information (see this issue on GitHub), but overall this is a great resource.

A tool like this should be the go-to source of information because browser vendors are always optimizing things and a developer can't always rely on static information they read in the past.

If you're curious about how this tool acquires its data, you can check out the source code. It uses a suite of fully automated tests to tap into various browser engines and theoretically should always be up to date.

Because this tool is recommended by Google developer advocates, it's unlikely it will ever go down, but in the event it does you can always build it yourself from the source code linked above.

Regarding how much time is spent updating layout (and layer trees), there is no easy answer. The number of DOM elements you have in your app can affect how long each layout takes, and it's also possible to trigger "layout thrashing" by repeatedly updating and then querying layout information. This can cause the browser to spend significantly more time in this step. If you're concerned about a specific performance issue, the best approach is to measure what is actually happening in your own app using browser performance tools.