Common Checks
– 坚持使用 transform 和 opacity 属性更改来实现动画。
– 使用 will-change 或 translateZ 提升移动的元素。
– 避免过度使用提升规则;各层都需要内存和管理开销。

Several Questions
– 有多少layers?合理的数量是多少?每一个layer的原因。
– 在不通电的多倍屏(如13寸MBP)的匿名模式窗口中打开查看Layers面板。每个layer渲染一帧耗时?确保所有layer加起来小于15ms。
– 在做动画时,有多少个layer重新绘制?考虑减少不必要的layer重新绘制或者复杂的layer拆解。
Performance Targets
– 每个layer力争4 – 5毫秒的时间(尤其针对于可能要做的Admin移动端来说尤为重要)。
– 每个稍大(绘制时间超过1ms)layer都具有必要性,否则销毁。
– 动画过程中,通过观察Layers和Animation面板确定每个layers重绘都是必要的。
– 如果Layers面板中的layer绘制时间求和的结果在15ms以内,上述就都不必check了。
– 在Performance面板中一定一定不要存在forced layout,如果有请消灭它。
Other Actions
– 坚持仅合成器的属性和管理层计数,否则使用FLIP原则使得从开销更大的属性重新映射为变形和透明度的更改。
Refs
– Layers面板使用方式查漏补缺
– FLIP Principle
– Inspect Your Animation
– 降低绘制复杂度、减小绘制区域
– 坚持仅合成器的属性和管理层计数

菜单栏收缩动画性能瓶颈分析案例
– 动画属性不符合预期

  • 重绘制layers完全超乎预期

  • Antd Loading提升一个Layer而且占用内存超预期很多

  • 没必要的layer开销超预期很多

  • 同一个DOM却提升两个layer

  • 动画过程中,.basic-layout-container未提升新layer,且提升之后Layer出现闪动(似乎是layer销毁却又重新创建)

  • 降低绘制复杂度

  • 减小绘制区域(Antd Loading没必要随父元素展开,用绝对定位或者定高来限制绘制区域,水印亦是如此)

分类: technology

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据