Angular Material侧边栏首次展开动画卡顿缓慢问题排查

问题描述 #

开发移动端网站时使用Angular Material的mat-sidenav组件，首次加载（比如登录后）点击汉堡菜单触发侧边栏展开时，动画缓慢卡顿且非线性，首次操作后动画恢复流畅线性。侧边栏以静态内容为主，部分内容由API响应注入。

相关代码 #

app.component.html

<mat-sidenav
  #sidenav
  mode="over"
  (click)="toggleLeftSidenav()"
  class="sidenav_main"
  style="background: #fff"
>
  <app-sidemenu></app-sidemenu>
</mat-sidenav>
<mat-sidenav-content>
  <router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>

app.component.ts

ngAfterViewInit(): void {
  this._sideNavService.setSidenav(this.sidenav);
}
toggleLeftSidenav() {
  this._sideNavService.toggle();
}

sidenav.service.ts

import { Injectable } from "@angular/core";
import { MatSidenav } from "@angular/material/sidenav";

@Injectable({ providedIn: "root" })
export class SidenavService {
  private sidenav: MatSidenav;
  public setSidenav(sidenav: MatSidenav) {
    this.sidenav = sidenav;
  }
  public toggle(): void {
    this.sidenav.toggle();
  }
}

成因分析 #

1. 首次渲染开销：首次点击时，app-sidemenu组件才开始初始化渲染，DOM元素创建、样式计算、API数据注入等操作会和侧边栏动画抢占主线程，导致动画帧丢失，出现卡顿。
2. Angular变更检测：首次展开时，组件树的变更检测会集中执行，加上可能的API请求回调触发的变更，进一步阻塞动画执行。
3. 浏览器渲染优化未生效：首次渲染时浏览器还未对侧边栏元素进行图层分离和GPU加速预准备，动画过程中需要重新计算布局（layout）和绘制（paint），而非仅执行合成（composite），导致动画不流畅。

优化方案 #

1. 预渲染侧边栏内容 #

• 在应用初始化阶段（比如登录完成后）提前加载app-sidemenu的内容，避免首次点击时才开始渲染。可以通过在app.component中提前初始化组件，或者使用*ngIf="true"确保组件在页面加载时就完成渲染（保持隐藏状态）。
• 对于API注入的内容，提前发起请求并缓存数据，确保首次展开时数据已就绪，无需等待异步回调。

2. 优化Angular变更检测 #

• 给app-sidemenu组件添加ChangeDetectionStrategy.OnPush，减少不必要的变更检测触发，降低主线程负载。
• 若侧边栏内容无需实时更新，可在数据加载完成后手动触发变更检测，之后禁用自动检测。

3. 优化浏览器渲染性能 #

• 给sidenav_main类添加CSS属性，强制浏览器将侧边栏元素分离到独立图层，启用GPU加速：

.sidenav_main {
  will-change: transform;
  transform: translateZ(0);
}

• 避免在侧边栏元素上使用会触发重排重绘的样式（比如动态修改width、margin），尽量使用transform和opacity属性实现动画，这两个属性仅触发合成阶段，性能更高。

4. 延迟非关键内容加载 #

• 将侧边栏中非首屏必要的内容（比如次要菜单、底部信息）设置为懒加载，等侧边栏首次展开完成后再加载，减少首次渲染的DOM节点数量。

5. 调整动画时机 #

• 可以在首次点击时先触发侧边栏的动画，等动画完成后再加载部分非关键内容，或者给内容添加渐入动画，避免动画和内容渲染冲突。

内容的提问来源于stack exchange，提问作者sinan