Chrome DevTools时间轴更新层树事件

Question

我正在制作包含大量内容的动画/过渡重型网页应用。应用程序中有很多组合层，因为所有内容都是使用css转换移动/动画的。我正在尝试调试应用程序以找出渲染瓶颈，我注意到Chrome DevTools中有很多“更新层树”事件 - ＆gt;时间表 - ＆gt;帧模式如下：

有人知道可能导致这种情况的原因吗？ “更新层树”究竟代表什么？

Answer 1

首先，您必须了解Render Layer是什么。 Render Layer是浏览器表示如何呈现该节点以及它如何与具有相同坐标空间的其他节点相关联以处理重叠内容，绘画等内容。Update Layer Tree可能发生在不同的东西的数量。例如，如果您使用javascript在元素上设置样式，则需要计算和更新Layer Tree。或者它可能必须在合成器线程（纹理加载到GPU）和主线程（运行javascript的地方）之间同步Layer Tree。

在你的情况下，我会 猜测 你正在触发一个基本层失效，迫使它在树层次结构上更新一层，然后再滴流在树下面并导致每个层都被更新。虽然不看你的代码很难说。

无论哪种方式，如果在重新计算Update Layer Tree之前一直发生这个长Layout，那么它肯定与此相关。

以下是一些可以帮助您入门的资源。

阅读此HTML5 Rocks关于浏览器图层的文章。 Accelerated Rendering in Chrome

或其他关于合成的HTML5 Rocks文章。 High Performance Animations

如果您想深入了解Chrome如何呈现页面并在该过程中使用GPU。关于它的Chromium博客上有一篇很棒的文章。 GPU Accelerated Compositing in Chrome

祝你好运。