performance - 是什么导致了这个过多的 "Composite Layers"、 "Recalculate Style"和 "Update Layer Tree"循环？

Question

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

如果您将 Chrome 指向我们快速移动的流之一，请说 https://choir.io/player/beachmonks/github ，然后打开你的“FPS Meter”，你可以看到我们在顶部的情况下，该应用大多数时候都可以达到 60fps 左右。

但是，一旦我向下滚动几条消息并保持屏幕不变，FPS 速率就会急剧下降到 10 左右甚至更低。代码在这里所做的是渲染每个传入的消息，将其添加到顶部并将列表向上滚动 Npx，这是新消息的高度，以保持视口(viewport)位置不变。

(我知道 scrollTop 会使屏幕无效，但我已仔细订购操作以避免布局抖动。我也知道每秒发生的同步重绘，它是由 jquery.sparkline 引起的，但与本次讨论无关。)

这是我在尝试分析它时看到的。
.

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

Answer 1

我遇到过同样的问题。我通过减小图像的大小来修复它。

可滚动列表中有一些缩略图。每个缩略图的大小为 3000x1800，但它们被 CSS 调整为 62x44。使用 62x44 图像减少了“复合层”所消耗的时间。