js如何检测CPU使用率 浏览器端CPU占用率监控方案

function calculateCPULoad(duration = 100) {
  const start = performance.now();
  let i = 0;
  while (performance.now() - start < duration) {
    i++; // 模拟 CPU 密集型计算
  }
  const end = performance.now();
  return i / duration; // 每毫秒执行的循环次数，可以作为 CPU 负载的指标
}

// 示例：每秒钟测量一次 CPU 负载
setInterval(() => {
  const cpuLoad = calculateCPULoad();
  console.log('CPU Load:', cpuLoad);
}, 1000);

// 示例：使用 WebAssembly 进行 CPU 密集型计算
async function calculateCPULoadWithWASM(duration = 100) {
  const wasmCode = new Uint8Array([
    0, 97, 115, 109, 1, 0, 0, 0, 1, 13, 2, 96, 0, 1, 127, 96, 0, 0, 3, 2, 1, 0, 7,
    7, 1, 3, 109, 101, 109, 111, 114, 121, 0, 0, 10, 8, 1, 6, 0, 65, 0, 16, 0, 11,
  ]);
  const wasmModule = await WebAssembly.compile(wasmCode);
  const wasmInstance = new WebAssembly.Instance(wasmModule, {});
  const start = performance.now();
  let i = 0;
  while (performance.now() - start < duration) {
    wasmInstance.exports.memory.grow(1); // 模拟内存分配
    i++;
  }
  const end = performance.now();
  return i / duration;
}

// 示例：每秒钟测量一次 CPU 负载
setInterval(async () => {
  const cpuLoad = await calculateCPULoadWithWASM();
  console.log('CPU Load (WASM):', cpuLoad);
}, 1000);

// 示例：使用 Chart.js 可视化 CPU 负载数据
const cpuLoadData = [];
const cpuLoadChart = new Chart(document.getElementById('cpuChart'), {
  type: 'line',
  data: {
    labels: [],
    datasets: [{
      label: 'CPU Load',
      data: cpuLoadData,
      borderColor: 'rgb(75, 192, 192)',
      tension: 0.1
    }]
  },
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  }
});

// 示例：更新图表数据
setInterval(() => {
  const cpuLoad = calculateCPULoad();
  cpuLoadData.push(cpuLoad);
  cpuLoadChart.data.labels.push(new Date().toLocaleTimeString());
  cpuLoadChart.update();
}, 1000);