Dev Tools中的慢速光栅化
Tam*_*lyn 11 javascript performance frontend google-chrome-devtools
我正在使用一些相当简单的视差滚动来优化网站.动画元素位于不同的图层(backface-visibility:hidden)上,脚本和渲染步骤看起来相当快.但是我看到很多时间花在绘画上:
实际绘图很好,但那些巨大的空心绿条表示单独的合成器线程中的光栅化.
我该怎么做才能做到这一点,我该如何改进呢？
Pau*_*ish 11
好的,我可以重复空心棒.
它们发生在合成器线程上,这就是为什么我们将它们空洞化.你可以更清楚地看到火焰图:
然后,如果您使用" 绘制"复选框选中时间线,则可以确切地看到每个绘制内部的内容.
然后我们可以使用滑块缩小哪些绘制调用是这些大型涂料中最昂贵的部分:
(看起来像一个大的剪辑,然后位图绘制)
但总体而言......似乎你在每一帧都重新塑造了世界.
您可能希望了解每个框架中发生的情况...尤其是对您的图层:
然而.
毕竟,看起来你可以用动画transform:translate()而不是left/ 来解决你的问题top.我还建议添加will-change:transform到这些项目.这将允许浏览器在不重新绘制的情况下移动项目,您不必在每个帧上进行重新设置.
必读:
干杯
| 归档时间： |
|
| 查看次数： |
2368 次 |
| 最近记录： |