0%

前端动画性能调优指南

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没必要随父元素展开,用绝对定位或者定高来限制绘制区域,水印亦是如此)