Web Workers

Web Workers 是 HTML5 标准中引入的一项技术，它允许在浏览器中启动后台线程来执行 JavaScript 代码，从而避免阻塞 UI 线程。因为 UI 线程的阻塞可能会导致页面卡顿或者无响应，所以 Web Workers 在一些需要执行复杂计算或者大量数据处理的场景中非常有用。

要使用 Web Workers，您需要创建一个新的 JavaScript 文件，然后在主线程中使用 `new Worker()` API 创建一个 Worker 实例。Worker 实例中的代码将在后台线程中执行，而主线程可以继续执行其他任务。

以下是使用 Web Workers 计算 CPU 使用率的示例代码：

1. 创建一个新的 JavaScript 文件，例如 `cpu-worker.js`，并将以下代码复制进去：

let startUsage = null;
let startTime = null;

self.addEventListener('message', (event) => {
  if (event.data === 'start') {
    startUsage = performance.now();
    startTime = Date.now();
    setTimeout(calculateCpuUsage, 1000);
  }
});

function calculateCpuUsage() {
  const endUsage = performance.now();
  const endTime = Date.now();
  const usedTime = endUsage - startUsage;
  const elapsedTime = endTime - startTime;
  const cpuUsage = (usedTime / 1000 / elapsedTime) * navigator.hardwareConcurrency * 100;
  self.postMessage(cpuUsage.toFixed(2));
}

2. 在 HTML 页面中创建一个按钮，并添加以下代码：

const cpuWorker = new Worker('cpu-worker.js');

// 监听 Web Worker 的消息事件，输出 CPU 使用率
cpuWorker.addEventListener('message', (event) => {
  console.log(`CPU Usage: ${event.data}%`);
});

// 点击按钮时启动 Web Worker 来计算 CPU 使用率
document.querySelector('#start-button').addEventListener('click', () => {
  cpuWorker.postMessage('start');
});

在上面的代码中，我们创建了一个名为 `cpu-worker.js` 的文件，其中定义了一个 `calculateCpuUsage()` 函数来计算 CPU 使用率。这个函数会在 1 秒后被调用，并根据 Performance API 和 navigator.hardwareConcurrency 属性来计算 CPU 使用率。

在 HTML 页面中，我们创建了一个按钮，并在按钮点击事件中启动了 Web Worker。当 Web Worker 计算出 CPU 使用率后，会通过 `postMessage()` 方法发送消息给主线程，主线程则在监听到消息事件后输出 CPU 使用率。

请注意，由于 Web Workers 是在后台线程中执行，因此它们无法访问 DOM 和其他浏览器 API。如果您需要在 Web Worker 中进行网络请求或者其他浏览器操作，可以考虑使用 `importScripts()` 函数来导入其他 JavaScript 文件。