google-chrome - Chrome DevTools 时间线更新图层树事件

Question

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

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

Answer 1

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

就你的情况而言，我猜测你正在触发一个基本的层失效，迫使它更新树层次结构中较高的层，然后该层正在慢慢流动沿着树向下并导致每个层都被更新。尽管如果不查看代码就很难说。

不管怎样，如果这么长Update Layer Tree始终发生在 Layout 之前正在重新计算，这肯定与此有关。

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

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

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

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

祝你好运。