Chrome DevTools 时间线更新层树事件答案

【问题标题】：Chrome DevTools Timeline Update Layer Tree EventChrome DevTools 时间线更新层树事件
【发布时间】：2014-11-01 15:57:30
【问题描述】：

我正在构建包含大量内容的动画/过渡繁重的网络应用。应用程序中有很多合成层，因为所有内容都是使用 css 转换移动/动画的。我正在尝试调试应用程序以找出渲染瓶颈，并且我注意到 Chrome DevTools -> Timeline -> Frames 模式中有很多“更新层树”事件，例如：

有人知道是什么原因造成的吗？ “更新层树”究竟代表什么？

【问题讨论】：

标签： google-chrome google-chrome-devtools

【解决方案1】：

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

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

无论哪种方式，如果在重新计算 Layout 之前一直出现这么长的 Update Layer Tree，则肯定与此有关。

这里有一些资源可以帮助您入门。

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

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

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

祝你好运。

【讨论】：

实际上是“合成”，而不是“合成”。在两个地方。