是啥导致了这种过多的“复合层”、“重新计算样式”和“更新层树”循环？

Posted 2023-02-22

【中文标题】是啥导致了这种过多的“复合层”、“重新计算样式”和“更新层树”循环？

【英文标题】：What's causing this excessive "Composite Layers", "Recalculate Style" and "Update Layer Tree" cycle?是什么导致了这种过多的“复合层”、“重新计算样式”和“更新层树”循环？

【发布时间】：2014-09-28 01:47:00

【问题描述】：

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

如果您将 Chrome 指向我们快速移动的流之一，例如 https://choir.io/player/beachmonks/github，并打开您的“FPS 计”，您会看到应用在大多数情况下可以达到大约 60fps，而我们处于领先地位.

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

（我知道 scrollTop 会使屏幕无效，但我已仔细订购操作以避免布局颠簸。我也知道每秒发生的同步重绘，这是由 jquery.sparkline 引起的，但与此无关讨论。）

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

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

【问题讨论】：

也许这对你有用，Scrolling Performance by performance guru Paul Lewis

@pilau：感谢您的链接。这很有帮助。

@RahulPrasad 很高兴我能提供帮助。

@AlexDong 你有没有找到问题的答案？我正在查看我的滚动性能，我想知道同样的事情。

@ClarkPan 一点也不。实际上，上面引用了其链接的 Paul Lewis 认为这是 Chrome 中的一个错误，Chrome 团队正在积极改进它：twitter.com/aerotwist/status/498886055391952897

【参考方案1】：

所有需要重绘的元素上的 CSS 属性 will-change: transform 为我解决了复合层过多的问题。

【讨论】：

在哪里可以看到哪些元素需要重绘？

【参考方案2】：

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

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

【参考方案3】：

有关Composite Layers 的一些信息可以提供帮助

从我看到的here 看来

事件：复合层

说明：Chrome 的渲染引擎合成图像层。

来自wikipedia的复合词的含义

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

所以这是制作我们实际看到的页面的过程，通过获取编码/调整图像大小的输出、解析 html 和解析 CSS 来制作我们看到的最终页面

【讨论】：

不知道这个答案与@Alex 发布的问题有何关系

@Vinay 我不记得这个问题或这个答案，但当时我认为composite layers 是导致问题的过程，所以我向他解释了这个过程是什么跨度>

并不意味着否定，你对复合的事情实际上是正确的，但我的意思是你可以改变你的答案，说这不能回答问题，但我有一些信息可能会给你指点。