Google AdSense导致Angular 16站点冻结问题排查求助

问题描述 #

在Angular项目中使用Google AdSense已有一段时间，此前运行正常，但近期启用AdSense后移动端站点出现冻结现象——禁用AdSense时站点运行流畅，启用则出现全/部分空白页或卡顿，可确定AdSense为问题根源。

测试环境与现象 #

• PC端：Chrome正常，Edge可复现卡顿且控制台无报错
• 旧iPad：因Safari版本兼容无法加载广告，站点运行正常
• Mac端：Safari和Chrome均正常
• iOS 16.3/16.6版本：可复现问题，拒绝分析与营销Cookie后站点恢复正常
• 安卓设备：新版本无问题，旧版本存在同样问题
  测试站点：https://www.micarburante.com

技术栈配置 #

Angular版本 #

Angular 16.2.0

tsconfig.json配置 #

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "lib": [
      "ES2022",
      "dom"
    ],
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

package.json依赖 #

"dependencies": {
    "@angular/animations": "^16.2.0",
    "@angular/common": "^16.2.0",
    "@angular/compiler": "^16.2.0",
    "@angular/core": "^16.2.0",
    "@angular/elements": "^16.2.0",
    "@angular/forms": "^16.2.0",
    "@angular/platform-browser": "^16.2.0",
    "@angular/platform-browser-dynamic": "^16.2.0",
    "@angular/platform-server": "^16.2.0",
    "@angular/router": "^16.2.0",
    "@fortawesome/angular-fontawesome": "^0.13.0",
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@ng-select/ng-select": "^11.1.1",
    "@nguniversal/common": "^16.2.0",
    "@nguniversal/express-engine": "^16.2.0",
    "@webcomponents/custom-elements": "1.5.1",
    "bootstrap": "^5.3.1",
    "chart.js": "^3.6.0",
    "compression": "^1.7.4",
    "express": "^4.18.2",
    "leaflet": "^1.9.4",
    "ng-recaptcha": "^12.0.2",
    "ng2-charts": "^4.1.1",
    "ngx-cookie-service": "^16.0.0",
    "rxjs": "~7.8.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^16.0.0",
    "@angular-devkit/build-angular": "^16.2.0",
    "@angular/cli": "^16.2.0",
    "@angular/compiler-cli": "^16.2.0",
    "@angular/language-service": "^16.2.0",
    "@nguniversal/builders": "^16.2.0",
    "@types/express": "4.17.17",
    "@types/leaflet": "1.9.3",
    "@types/node": "20.4.8",
    "concat": "1.0.3",
    "fs-extra": "11.1.1",
    "jasmine-core": "3.8.0",
    "karma": "^6.4.0",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "^3.0.2",
    "karma-jasmine": "4.0.0",
    "karma-jasmine-html-reporter": "1.5.0",
    "postcss-scss": "4.0.6",
    "purgecss-webpack-plugin": "5.0.0",
    "typescript": "^4.9.3",
    "webpack-bundle-analyzer": "^4.9.0"
  }

构建与AdSense配置 #

• 构建流程仅使用PurgeCSS压缩style.css文件
• AdSense采用标准模式配置

已尝试的排查方案 #

• 升级至Angular 16.2.0
• 调整TS编译目标为ES2020/ES2015
• 完全禁用客户端水化（注释main.ts和main.server.ts中的provideClientHydration）
  以上操作均未解决问题

冻结触发场景 #

访问首页滚动至底部，点击相关链接（如“Gasolineras en Madrid”）或页脚任意元素时出现冻结。

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