Javascript Dev工具中的缓慢光栅化
我正在用一些相当简单的视差滚动优化一个站点。动画元素位于不同的层上(Javascript Dev工具中的缓慢光栅化,javascript,performance,google-chrome-devtools,frontend,Javascript,Performance,Google Chrome Devtools,Frontend,我正在用一些相当简单的视差滚动优化一个站点。动画元素位于不同的层上(backface visibility:hidden),脚本和渲染步骤似乎相当快。然而,我看到很多时间都花在绘画上: 实际的图形很好,但这些巨大的图形在单独的合成器线程中表示光栅化 我在做什么来引起这种情况?我如何才能改进它 好的,我可以重新设置空心棒 它们发生在合成器线程上,这就是为什么我们将它们空心化。您可以更清楚地查看火焰图表: 然后,如果选中了绘制复选框记录时间线,则可以准确地看到每个绘制中的内容 然后我们可以
backface visibility:hidden
),脚本和渲染步骤似乎相当快。然而,我看到很多时间都花在绘画上:
实际的图形很好,但这些巨大的图形在单独的合成器线程中表示光栅化
我在做什么来引起这种情况?我如何才能改进它 好的,我可以重新设置空心棒 它们发生在合成器线程上,这就是为什么我们将它们空心化。您可以更清楚地查看火焰图表: 然后,如果选中了绘制复选框记录时间线,则可以准确地看到每个绘制中的内容 然后我们可以使用滑块缩小绘制调用是这些大型绘制中最昂贵的部分: (看起来像一个大的cliprect,然后是位图绘制) 但总体来看。。看起来你在每一帧中都在重新绘制世界 你可能想看看每一帧都发生了什么。。。尤其是你的图层: 不过 在所有这些之后,您似乎可以通过设置
transform:translate()
而不是left
/top
的动画来解决问题。我还建议增加这些项目。这将允许浏览器在不重新绘制的情况下移动项目,并且您不必在每个帧上重新设置
必须阅读:
干杯你能分享你的页面吗,或者至少分享其中的一部分吗?@Kiril我已经添加了一个到dev网站的链接。谢谢你的关注。