为啥“复合层”需要这么多时间？

Posted 2023-03-07

【中文标题】为啥“复合层”需要这么多时间？

【英文标题】：Why "Composite Layers" takes so much time?为什么“复合层”需要这么多时间？

【发布时间】：2015-10-03 11:05:00

【问题描述】：

我正在使用无限滚动和数据延迟加载来分析列表。什么会导致这个漫长的“复合层”阶段？

和

如果您对列表的详细信息感兴趣：

列表的物理行元素数量有限，并且使用 “transform: translate3d(...)”在滚动时重新排序。 Chrome 在单独的图层中绘制每一行。 整个浏览器页面最多只有 25 层。

【问题讨论】：

如果您有一个指向您正在调试的页面的链接，这将非常有帮助。在没有看到网页的情况下很难调试任何东西。根据我从您的帖子中收集到的信息，您似乎有一些动画正在进行，这可能是您问题的根源。

很难说没有看到实际页面，但是如果您在滚动时不断变换（如您所描述的），那么这将解释一个大的复合阶段 - 变换由合成器线程执行GPU的帮助。见：csstriggers.com/transform

【参考方案1】：

没有链接，很难确定 - 但从所有“紫色”的外观（在您的第一个屏幕截图中），您可能使用了太多包含以下任何属性的元素：

A) 有position: fixed;

B) 在动画之前和期间使用transform

C) 同时使用过多的keyframes（例如在延迟加载时追加行）

编辑：升级您的 Chrome 版本 - 性能取代了时间轴，并提供了有关您可能正在寻找的详细信息的更多见解。