Chrome低fps - devtools长更新层树和复合层，页面上的层数非常少

Question

我正在尝试在我的页面上调试低FPS。我看到每帧花费了大量时间在＆＃34;更新层树＆＃34;和＆＃34;复合图层＆＃34;。更新层树始终在10-20ms之间，复合层在6-10ms之间。

我的困惑来自于我的页面上只包含4层（包括根层）。当只有4层时，如何更新层树和合成花费这么多时间？

除此之外，我的框架中还有很长的空白区域。此外，chrome将我的滚动区域标识为慢滚动矩形，但只是说＆＃34; undefined＆＃34;关于这个层。

我必须在devtools中遗漏一些可以帮助我理解低FPS的信息。此屏幕截图捕获了奇怪的行为。

编辑：我将transform：translateZ（0）应用于我的滚动容器。这会强制创建更多图层。它似乎加快了速度，但我仍然有一些非常缓慢的帧，devtools没有给我任何信息。长长的空白延伸。见这个截图：