Chrome DevTools时间线更新图层树事件 [英] Chrome DevTools Timeline Update Layer Tree Event

问题描述

我正在构建具有大量内容的动画/转换沉重网页应用程序。应用中有很多构图图层，因为所有内容都是使用CSS变换移动/动画的。我试图调试应用程序以找出渲染瓶颈，并且我注意到Chrome DevTools - > Timeline - > Frames模式中有很多更新图层树事件：

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?

推荐答案

首先，您必须了解 Render层是。 渲染层是浏览器如何呈现该节点的表示，以及它如何与具有相同坐标空间的其他节点相关以处理重叠内容，绘画等内容。 更新图层树可能来自许多不同的事情。例如，如果您使用javascript在元素上设置样式，则需要计算和更新图层树。或者也许它必须在合成器线程（纹理加载到GPU）和主线程（JavaScript运行的地方）之间同步图层树。

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 ).

就你而言，我会 guess 触发基本图层失效，迫使它将图层更新为最高层在树的层次结构中，然后逐渐下移树并导致每个层被更新。虽然很难说没有看你的代码。

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.

无论哪种方式，如果这个长的更新层树一直在发生在重新计算 Layout 之前，它肯定与此有关。

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.

阅读这篇关于浏览器图层的HTML5 Rocks文章。 在Chrome中加速渲染

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

或这篇关于合成的其他HTML5 Rocks文章。 高性能动画

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

如果您想深入了解chrome如何渲染页面并在该过程中使用GPU。 Chromium博客上有一篇很棒的文章。 在GPU中加速合成GPU

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

祝你好运。

这篇关于Chrome DevTools时间线更新图层树事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！