写一个方法探测CPU占比情况

在前端开发中，直接探测CPU占比情况是比较困难的，因为浏览器环境出于安全和隐私的考虑，限制了直接访问系统级硬件信息（如CPU使用率）的能力。不过，你可以通过一些间接的方式来估计页面的性能表现，或者使用Web Workers来模拟CPU负载并观察其执行时间，从而间接推测CPU的繁忙程度。

以下是一个使用Web Workers来模拟CPU负载并估计CPU使用情况的示例：

1. 创建一个Web Worker文件（cpuWorker.js）：

// cpuWorker.js
self.onmessage = function(event) {
  const endTime = Date.now() + event.data * 1000; // 根据传入的时间（秒）计算结束时间
  while (Date.now() < endTime) {
    // 空循环以模拟CPU负载
  }
  self.postMessage('done'); // 完成后发送消息给主线程
};

2. 在主线程中调用Web Worker：

// 主线程代码
function estimateCpuUsage(seconds) {
  return new Promise((resolve, reject) => {
    const worker = new Worker('cpuWorker.js'); // 创建Web Worker
    const startTime = Date.now();

    worker.onmessage = function(event) {
      const endTime = Date.now();
      const elapsedTime = (endTime - startTime) / 1000; // 计算执行时间（秒）
      const estimatedCpuUsage = (elapsedTime / seconds) * 100; // 估计CPU使用率（%）
      resolve(estimatedCpuUsage);
      worker.terminate(); // 结束Web Worker
    };

    worker.onerror = function(error) {
      reject(error);
      worker.terminate(); // 结束Web Worker
    };

    worker.postMessage(seconds); // 向Web Worker发送消息，开始模拟CPU负载
  });
}

// 使用示例：估计5秒内的CPU使用情况
estimateCpuUsage(5).then(cpuUsage => {
  console.log(`Estimated CPU usage: ${cpuUsage.toFixed(2)}%`);
}).catch(error => {
  console.error('Error estimating CPU usage:', error);
});

注意：这种方法并不是直接测量CPU的实际使用率，而是通过模拟CPU负载并观察其执行时间来估计CPU的繁忙程度。因此，得到的结果可能并不准确，并且会受到多种因素的影响（如其他正在运行的进程、浏览器的性能优化等）。在实际应用中，你可能需要结合其他指标（如页面的响应时间、帧率等）来综合评估页面的性能表现。

如果你需要更准确的CPU使用率数据，通常需要在服务器端或使用专门的性能监控工具来收集这些信息。