Performance 什么'；“是什么导致了这种过度的”；复合层&引用；“重新计算样式”；及；“更新图层树”；周期

我对我们的一个webapp中出现过多的“复合层”、“重新计算样式”和“更新层树”事件非常感兴趣。我想知道是什么导致他们来这里

如果你把你的Chrome浏览器指向我们的一条快速移动的流，比如说，打开你的“FPS米”，你可以看到，当我们处于顶端时，该应用程序在大多数情况下都可以达到60 FPS左右

然而，只要我向下滚动几条消息并保持屏幕原样，FPS速率就会急剧下降到10左右甚至更低。这里的代码所做的是渲染每个传入消息，将其前置到顶部，并向上滚动列表Npx（新消息的高度），以保持视口位置不变

（我知道scrollTop将使屏幕无效，但我已仔细安排了操作以避免布局混乱。我还知道每秒都会发生同步重新绘制，这是由jquery.sparkline引起的，但与本次讨论无关。）

下面是我在尝试分析它时看到的内容。 .

您认为是什么原因导致了大量的层操作？

有关复合层的一些信息可以有所帮助 据我所见，上面写着

事件：复合层

描述：Chrome的渲染引擎合成图像层

对于单词composite from的含义

合成是将来自不同来源的视觉元素组合成单个图像，通常产生所有这些元素都是同一场景的一部分的错觉

---

因此，这是一个制作我们实际看到的页面的过程，通过编码/调整图像大小的输出，解析HTML和解析CSS来制作我们看到的最后一个页面。CSS属性

将改变：在所有需要重新绘制的元素上转换
，解决了我需要太多复合层的问题。
我也有同样的问题。我通过缩小图像的大小来修复它

可滚动列表中有一些缩略图。每个缩略图的大小为3000x1800，但CSS将其大小调整为62x44。使用62x44图像减少了“复合层”所需的时间。
性能专家Paul说，这可能对您有用Lewis@pilau：谢谢你的链接。这很有帮助。@RahulPrasad很高兴我能帮忙。@Alextong你有没有找到你问题的答案？我在看我的卷轴表演，我也在想同样的事情。@ClarkPan一点也不想。事实上，上面引用了Paul Lewis的链接，认为这是Chrome中的一个bug，Chrome团队正在积极改进它：不知道这个答案与发布的问题有什么关系@Alex@Vinay我不记得这个问题或这个答案，但当时我认为，
复合层
是负责这个问题的过程，所以我向他解释了这个过程是什么我的意思是你可以改变你的答案，说这不能回答问题，但我有一些信息可以给你一些提示。我在哪里可以看到哪些元素需要重新绘制？