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

Question

我正在研究嵌入在低端设备中的Web应用程序，并且在渲染时我遇到了很长的for (var k = 0; k <= request["items"].length - 1; k++) { var customDataImportUid = request["items"][k]["id"]; //get the unique upload id //delete the file with a specific upload id: var deleteUpload = Analytics.Management.Uploads.deleteUploadData( 0, accountId, webPropertyId, customDataSourceId, customDataImportUid); } 操作。

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

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

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

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

此致

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

Answer 1

因此，遇到一些测试，看起来UpddateLayerTree主要受到图层数量的影响，而不是每层的大小。考虑到这一点，它实际上是有道理的，因为UpdateLayerTree操作是关于重新计算每个层的信息。

就像它帮助其他人的情况一样，关于我的个人情况和之前的信息，我通过以下行动解决了这些漫长的UpdateLayerTree操作：

1. 在可能的情况下减少层数（通常通过移除定位元素）
2. 在视口中实际看不到元素时使用display:none。 display:none作为双重好处：元素已经被解析但是它们没有被渲染。因为它们没有被渲染，所以UpdateLayerTree操作会忽略它们，但是如果需要的话，它仍然可以快速渲染（因为它们已经在DOM中）。

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