可以使用什么杠杆来减少 Blink 中的 UpdateLayerTree 操作？答案

【问题标题】：What leverage can be used to reduce UpdateLayerTree operation in Blink?可以使用什么杠杆来减少 Blink 中的 UpdateLayerTree 操作？
【发布时间】：2018-03-14 17:07:06
【问题描述】：

我正在开发嵌入在低端设备中的 Web 应用程序，我在渲染时遇到了长时间的update layer tree 操作。

我知道update layer tree是计算或重新计算与RenderLayers相关的信息的操作，通常是因为顶层已经失效。我发现之前的这篇文章很好地解释了这一点：Chrome DevTools Timeline Update Layer Tree Event.

我的应用程序是围绕组件构建的，每个组件可能都有几层。如果我单独测试我的组件，一切正常，我会获得出色的性能（出色的 fps，流畅的动画）。现在，当我把所有东西放在一起时，表演就分崩离析了。我在 chrome 开发工具中看到的内容很长 UpdateLayerTree。

我想知道解决这个问题的手段是什么？我想第一个明显的行动是尝试减少整个应用程序中的层数。但这是我的问题：

层的数量是减少 UpdateLayerTree 的唯一手段吗？（例如，层的大小对此有什么影响吗？）
是否有一些技巧可以触发 Blink 中的快速渲染路径，从而可以避免或减少某些特定情况下的更新层树操作（我认为内联变换就是这种情况？）
你看到别的了吗？

问候，

（另外，作为旁注，我在 chromium 项目中打开了一个问题，以获得一些反馈：https://bugs.chromium.org/p/chromium/issues/detail?id=725712。）

【问题讨论】：

标签： javascript css chromium blink

【解决方案1】：

所以进行了一些测试，看起来UpddateLayerTree 主要受层数的影响，而不是每层的大小。想一想，其实是有道理的，因为UpdateLayerTree操作就是重新计算每一层的信息。

作为一个信息，以防它帮助其他人，关于我的个人案例和以前的信息，我正在通过以下操作解决那些长的 UpdateLayerTree 操作：

尽可能减少层数（通常通过移除定位元素）
当元素在视口中实际上不可见时，使用display:none。 display:none 作为双重好处：元素已经被解析但它们没有被渲染。由于它们没有被渲染，UpdateLayerTree 操作会忽略它们，但如果我们需要，它仍然可以快速渲染（因为它们已经在 DOM 中）。

也许，你们中的一些人会想出其他技术？

【讨论】：