如何控制Chrome访问部分网站时的CPU过度占用问题？

一、开发者面板临时调试方案 #

• 实时监控与终止Worker：打开DevTools（F12），切换到Sources面板，左侧栏找到Workers目录，选中占用CPU高的Worker，右键选择Terminate即可终止。也可通过Performance面板录制页面活动，精准定位消耗资源的Worker线程。
• 阻止Worker脚本加载：在DevTools的Network面板中，找到目标站点的Worker脚本（资源类型标记为worker），右键选择Block request URL，后续页面加载时会自动拦截该脚本运行。
• CPU节流调试：在Performance面板顶部的CPU下拉菜单中，选择4x slowdown或更高倍数，强制限制Worker的CPU使用效率，适合测试低性能环境下的页面表现。

二、Chrome内置全局/站点级限制设置 #

• 后台标签线程节流：在地址栏输入chrome://flags/#enable-thread-throttling-for-background-tabs，将选项设置为Enabled，后台标签页的Web Workers线程会被自动节流，降低CPU占用。
• 全局后台JS节流：打开chrome://flags/#background-throttling，启用该选项后，后台标签的所有JS执行（包括Web Workers）会被限制，仅在页面激活时恢复正常运行。

三、自定义Chrome扩展实现持久限制 #

方案1：用声明式网络请求阻止Worker加载 #

创建Manifest V3扩展，通过规则拦截目标站点的Worker脚本：

1. 编写manifest.json：

{
  "manifest_version": 3,
  "name": "Worker CPU Limiter",
  "version": "1.0",
  "permissions": ["declarativeNetRequest"],
  "host_permissions": ["*://twitter.com/*", "*://nypost.com/*"],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "block_workers",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

2. 编写rules.json规则文件：

[
  {
    "id": 1,
    "priority": 1,
    "action": {"type": "block"},
    "condition": {
      "urlFilter": "*.js",
      "resourceTypes": ["worker"]
    }
  }
]

将两个文件打包成扩展，加载到Chrome中即可自动阻止目标站点的Worker脚本。

方案2：注入脚本覆盖Worker构造函数 #

通过扩展或Tampermonkey脚本，在页面加载时替换Worker构造函数，阻止新Worker创建：

// Tampermonkey脚本示例
// @name Block Web Workers on Target Sites
// @match *://twitter.com/*
// @match *://nypost.com/*
// @grant none

const originalWorker = window.Worker;
window.Worker = function(url) {
  console.warn(`Blocked Worker creation for: ${url}`);
  // 返回空Worker避免页面报错
  return new originalWorker('data:text/javascript,');
};

注意：此方法可能导致部分网站功能异常，需根据实际使用场景调整。

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