为什么"复合图层"需要这么多时间？

Question

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

和

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

• 该列表具有有限数量的物理行元素,并在滚动时使用"transform:translate3d(...)"对它们进行重新排序.
• Chrome会在单独的图层中绘制每一行.
• 整个浏览器页面中最多只有25个图层.

Answer 1

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

一个有position: fixed;

transformB)在动画之前和期间使用

C）同时使用太多keyframes（例如，在延迟加载时附加行）

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