Chrome 121.0.6167.139下Angular 7应用动画卡顿问题求助

核心问题定位 #

从性能数据来看，问题聚焦在浏览器Painting和Commit阶段耗时异常，这是Chromium内核更新后，与Angular 7渲染机制适配冲突导致的兼容性问题，和后端服务、API调用无关。

针对性解决方案 #

• 强制启用Angular旧版渲染器
  Angular 7支持ViewEngine（旧渲染器）和Ivy（新渲染器），新版Chromium可能对Ivy的部分渲染逻辑兼容性不佳。在tsconfig.json中强制切换到ViewEngine：

  {
    "angularCompilerOptions": {
      "enableIvy": false
    }
  }
  

  重新构建应用后测试性能变化。

• 优化元素重绘触发逻辑
  排查并修改频繁触发重绘的元素：

  • 避免在*ngFor循环中绑定background-color、width这类会触发重绘的属性做动画，改用transform或opacity（这类属性仅触发合成，不触发重绘）
  • 给高频更新的元素添加will-change提示浏览器提前优化：

    .animated-element {
      will-change: transform;
    }
    

• 禁用Chromium新渲染特性
  Chrome 121新增的部分渲染特性可能引发冲突，可通过浏览器开关临时禁用排查：

  • 关闭Composite After Paint：在地址栏输入chrome://flags/#composite-after-paint，设置为Disabled后重启浏览器
  • 禁用Lazy Frame Loading：打开chrome://flags/#lazy-frame-loading，设置为Disabled

• 更新Angular核心依赖补丁
  Angular 7虽无法直接升级到高版本，但可更新同大版本下的补丁包，这些补丁可能包含Chromium新版本的兼容性修复：

  npm update @angular/core@7.x @angular/common@7.x @angular/platform-browser@7.x --save
  

• 排查第三方组件与全局样式冲突

  • 检查应用使用的第三方UI组件（如NG-ZORRO 7.x）是否存在Chrome 121相关的已知问题，查看官方仓库Issue或更新补丁
  • 移除全局样式中可能触发大面积重绘的动态规则，比如全局box-shadow、outline的频繁变化逻辑

验证方法 #

每次调整后，用Chrome DevTools的Performance面板重新录制分析，重点观察Painting和Commit阶段的耗时，确认是否恢复正常水平。

内容的提问来源于stack exchange，提问作者Mr. Morningstar