Angular 11应用在iOS 15.5中卡顿无响应，iOS 15.4正常求排查方向

我们的Angular 11应用在iOS 15.5版本运行1-2小时后会出现无响应、完全冻结的情况，但在iOS 15.4版本中运行正常。已尝试关闭所有订阅、添加循环中断处理，问题依旧，现寻求问题分析方向及具体调试建议。

项目package.json内容如下：

{
  "dependencies": {
    "@angular-devkit/architect": "0.1102.4",
    "@angular/animations": "11.2.5",
    "@angular/cdk": "^11.2.5",
    "@angular/common": "11.2.5",
    "@angular/compiler": "11.2.5",
    "@angular/core": "11.2.5",
    "@angular/forms": "11.2.5",
    "@angular/material": "^11.2.13",
    "@angular/platform-browser": "11.2.5",
    "@angular/platform-browser-dynamic": "11.2.5",
    "@angular/router": "11.2.5",
    "@azure/msal-angular": "^2.0.3",
    "@azure/msal-browser": "^2.17.0",
    "@types/googlemaps": "3.26.17",
    "angularx-qrcode": "^11.0.0",
    "bootstrap": "3.3.7",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "intl": "1.2.5",
    "moment-timezone": "0.5.13",
    "ngx-device-detector": "^2.0.3",
    "ngx-mask": "8.0.1",
    "ngx-material-timepicker": "^4.0.2",
    "ngx-toastr": "^13.2.1",
    "primeicons": "^4.0.0-rc.2",
    "primeng": "^9.1.3",
    "rxjs": "6.6.6",
    "rxjs-compat": "^6.6.6",
    "tslib": "^2.0.0",
    "web-animations-js": "^2.3.2",
    "xml2js": "0.4.19",
    "zone.js": "^0.11.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.4",
    "@angular-devkit/schematics": "11.2.4",
    "@angular/cli": "11.2.4",
    "@angular/compiler-cli": "11.2.5",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "4.14.118",
    "@types/node": "^12.11.1",
    "browser-sync": "^2.26.14",
    "codelyzer": "^6.0.0",
    "http-server": "13.0.1",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.2.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "lodash": "4.17.11",
    "protractor": "~7.0.0",
    "ts-node": "^8.3.0",
    "tslint": "~6.1.0",
    "typescript": "4.0.7"
  }
}

可能的问题点分析 #

• iOS 15.5 WebKit引擎变更：iOS 15.5对Safari的WebKit内核做了更新，Angular 11作为较旧版本，可能存在与新引擎的兼容性问题，尤其是zone.js、变更检测相关逻辑。
• 第三方依赖兼容性：检查package.json中的第三方库是否有已知的iOS 15.5适配问题，比如@azure/msal-angular、primeng、ngx-toastr等旧版本可能未适配新系统。
• 隐性内存泄漏：虽然关闭了显式订阅，但可能存在未清理的DOM引用、全局变量残留或RxJS隐式订阅，长时间运行后内存耗尽触发冻结。
• Polyfill与原生API冲突：项目中使用的web-animations-js polyfill，可能与iOS 15.5原生支持的Web Animations API产生冲突，导致主线程阻塞。

具体调试方向 #

• Safari远程调试监控：用Mac的Safari开发者工具连接iOS设备，实时追踪：
  • 主线程的长时间任务（Long Tasks），定位阻塞UI的代码段
  • 内存使用趋势，观察是否有持续增长的内存占用
  • Console中的报错或警告，重点关注iOS 15.5特有的提示
• 模块隔离排查：
  • 逐步禁用非核心功能模块，确认是否由某一特定模块触发冻结
  • 临时替换或移除第三方库（如primeng、msal），验证是否为依赖导致
• 依赖版本适配测试：
  • 升级zone.js到适配iOS 15.x的版本（当前为^0.11.0，可尝试0.11.4或更高兼容补丁版）
  • 升级Angular核心依赖到11.x分支的最新补丁版本，修复已知兼容性问题
• 变更检测优化：
  • 为组件启用ChangeDetectionStrategy.OnPush，减少不必要的变更检测频率
  • 简化模板中的复杂表达式，避免频繁更新的绑定逻辑
• 移除Polyfill测试：暂时移除web-animations-js polyfill，测试iOS 15.5原生支持下的运行情况

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