Javascript 使用chrome开发工具调试scroll jank&引用；更新图层树“；

在android上，scroll在我正在构建的react应用程序的聊天提要中非常刺耳。在性能面板中检查devtools后，我可以看到渲染花费了大量时间

我试着阅读了大量的参考资料

我试过很多方法，但没有一种效果显著

• 我已禁用任何

  ：悬停
  选择器

• 在滚动过程中没有类发生变化，我已经用父元素上的突变观察者用

  子树：true

  [0]验证了这一点
• 列表中的元素上没有

  mouseEnter

  或

  mouseLeave

  事件侦听器
• 在此过程中，我没有读取或写入

  离视

  、

  滚动顶

  或此列表中的任何其他值。在适用的情况下，我正在使用

  inresectionobserver

• 我已尝试在每个列表项上应用

  contain:layout

  ，和/或在父项上应用

  contain:layout

• 我已尝试删除全局事件侦听器
• 我已从列表中删除所有渲染的图像
• 我已经尝试应用

  将改变：转换到父级

• 我在渲染部分启用了“布局移动区域”、“层边界”

我所做的唯一一件具有重大影响的事情是将基本布局从：

html，
身体{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
溢出：隐藏；
}
.滚动父项{
高度：100vh；
溢出y：滚动；
显示器：flex；
弯曲方向：柱反向；
}

到

html，
主体{}
.滚动父项{}

后者仍然会产生常规的“更新层树”事件，但这些事件加起来并不重要，更多的时间花在“绘制”部分

启用“渲染>层边界”显示在以前的css布局中有两个重叠的瓷砖“集”

问题是我需要前者

溢出：隐藏以避免工具栏在ios safari上自动隐藏。我也不认为性能会这么差，因为我有一个有一些内部滚动的div。AFIK滚动不应导致图层树更新，它只应导致合成？我也可以求助于虚拟化滚动，但我已经向下滚动了更长的页面，没有jank，所以我认为这只是另一种解决方法，而不是解决核心限制

深入到devtools中，我可以看到主要的罪魁祸首似乎是“更新的层树”，但我真的不确定从那里走到哪里


我和他有一段恋情chrome://tracing 但我不能说我知道我在看什么



我一直在研究一个最小可复制的例子。这是我所能得到的最接近的，在分析复制副本时，可以观察到“更新的层树”标记，但性能没有实际应用中那么差。我认为CSS的复杂性要低得多，所以“更新的层树”在副本中运行得更快，但我可能不应该做任何假设


我可以采取哪些步骤来更好地分析根本原因
在滚动过程中有这么多“更新层树”事件是正常的吗

[0]

observer.observe（元素，{subtree:true，childList:true，attributes:true，characterData:true}）
通常，
溢出：滚动
+糟糕的滚动性能是浏览器分层问题的迹象。看看这些答案，都很好