JavaScript无法直接读取系统CPU占用率，但可通过Long Tasks API监控≥50ms的长任务、requestAnimationFrame检测帧耗时是否超33ms、DevTools Performance面板分析主线程负载，并用performance.mark/measure主动埋点量化耗时。
JavaScript 无法直接读取操作系统级的 CPU 占用率（比如“CPU 使用率 85%”这种百分比），浏览器出于安全隔离限制，不暴露这类系统指标。但你可以精准监控主线程的负载压力——这才是真正影响页面是否卡顿、掉帧、无响应的核心问题。
监控主线程是否被过度占用
主线程被长时间独占，等价于前端“CPU 过载”。重点不是看 %CPU，而是看它有没有被 JS 持续霸占、是否来得及响应渲染和用户输入。
-
Long Tasks API是最直接的观测手段：
浏览器会自动标记执行时间 ≥ 50ms 的任务为 Long Task。连续出现多个，说明主线程已严重过载。const observer = new PerformanceObserver((list) => { list.getEntries().forEach(entry => { if (entry.duration >= 50) { console.warn('长任务', entry.duration.toFixed(1) + 'ms', entry.name); } }); }); observer.observe({ entryTypes: ['longtask'] }); -
requestAnimationFrame+ 时间戳可评估帧耗时压力：
若rAF回调实际执行间隔远大于 16.7ms（如持续 >33ms），说明主线程被挤占，帧率已跌破 30FPS。let lastTime = performance.now(); function checkFrameLoad() { const now = performance.now(); const delta = now - lastTime; if (delta > 33) { console.log('帧耗时过高', delta.toFixed(1) + 'ms'); } lastTime = now; requestAnimationFrame(checkFrameLoad); } requestAnimationFrame(checkFrameLoad);
结合 DevTools 定位高消耗源头
- 打开 Chrome DevTools → Performance 面板 → 点击录制（●），操作页面后停止。
- 查看 Main 轨道：宽条即耗时长的任务；堆叠结构显示调用链；顶部 CPU 图若持续红色，说明主线程满载。
- 点击任一长任务 → 底部 Summary 中查看 Self Time（自身耗时）和 Call Stack，快速定位到具体函数或第三方库。
补充：用 performance.mark/measure 主动埋点
对可疑逻辑（如数据处理、渲染循环）手动打点，量化真实耗时：
performance.mark('start-process');
heavyDataProcess();
performance.mark('end-process');
performance.measure('process-duration', 'start-process', 'end-process');之后用 performance.getEntriesByName('process-duration') 提取数据，便于线上采集或对比优化效果。
立即学习“Java免费学习笔记（深入）”；
不复杂但容易忽略
