如何排查AngularJS应用运行时导致Chrome冻结的原因

我之前也踩过AngularJS digest循环导致CPU跑满的坑，结合你的情况，给你一套逐步排查的实用方案：

1. 先解决压缩代码的调试障碍 #

直接啃压缩代码完全是浪费时间，先把**源码映射（Source Maps）**配置好：

• 打开Chrome DevTools，进入右上角三个点→Settings，找到Sources板块，确保Enable JavaScript source maps和Enable CSS source maps都勾选。
• 检查你的构建工具（Webpack、Gulp等）是否生成了source map文件：比如Webpack里开启devtool: 'source-map'，这样DevTools就能自动映射到未压缩的原始业务代码，调试起来才有用。

2. 用Performance面板定位CPU消耗根源 #

比起Sources标签的断点调试，Performance面板更适合分析这类冻结型性能问题：

• 打开DevTools的Performance标签，点击左上角的录制红点。
• 立刻执行那个导致窗口冻结的操作，等几秒后停止录制（如果已经冻结，尽量快速终止录制）。
• 查看录制结果：
  • 找到持续占满CPU的长任务块，展开调用栈，重点追踪$digest、$apply相关的调用链，顺着往下就能定位到你的业务代码里的耗时函数。
  • 留意Long Tasks标记，这些就是导致页面无响应的元凶（单个任务超过50ms就会被标记）。

3. 用AngularJS Batarang分析watchers #

Batarang是官方专门针对AngularJS的调试工具，对digest循环和watchers的分析非常精准：

• 在Chrome应用商店安装Batarang插件，重启DevTools后会出现AngularJS标签。
• 切换到Performance子标签，执行目标操作后就能看到：
  • 每次digest循环的耗时和执行次数，如果循环次数异常多（比如几十次以上），大概率存在无限digest循环。
  • 每个watch表达式的执行时间和触发频率，优先排查那些耗时最长、触发最频繁的watch——比如模板里直接绑定的{{ heavyCalculation() }}，或者watch函数里做了DOM操作、复杂数据处理的情况。

4. 排查常见的AngularJS性能坑 #

（1）多余/低效的watchers #

• 在DevTools控制台执行angular.element(document.body).scope().$$watchersCount，查看当前页面的watch总数。如果超过1000个，就得开始精简了：
  • 用一次性绑定（AngularJS 1.3+支持）：把模板里不需要实时更新的绑定改成::{{ value }}，值稳定后就会从watch列表移除，减少digest负担。
  • 避免在模板里直接调用函数：比如把{{ getUserFullName(user) }}改成提前计算好user.fullName再绑定。
• 检查已销毁组件的残留watchers：比如directive或controller没正确清理$on监听，或者用了$rootScope.$watch但没在销毁时调用返回的注销函数。

（2）无限digest循环 #

有些场景下，watch的表达式每次执行都会生成新值，导致digest循环持续触发：

• 比如watch里返回新对象/数组：$scope.$watch(() => { return { id: 1 }; }, ...)，因为每次都是新对象，Angular会认为值发生变化，持续启动digest。
• 或者watch函数里修改了被watch的变量：$scope.$watch('count', (newVal) => { $scope.count = newVal + 1; })，这种逻辑会无限触发循环。
• 可以通过控制台日志或Batarang的digest次数统计判断，如果每次操作后digest跑了10次以上（Angular默认超过10次会报错，但部分场景可能不触发），就要重点排查这类问题。

5. 隔离测试缩小范围 #

如果应用规模太大，没法快速定位：

• 用DevTools的Elements面板，删除部分DOM元素（比如怀疑有问题的组件），测试操作是否还会冻结，逐步缩小可疑代码范围。
• 开启ng-strict-di模式：在ng-app指令里加上ng-strict-di（比如<div ng-app="myApp" ng-strict-di>），这样能检测出不规范的依赖注入，有些隐藏的注入问题也会导致性能异常。

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