JavaScript无法直接获取系统CPU使用率，但可通过performance.memory监测内存压力、Long Tasks API捕获主线程阻塞、requestAnimationFrame评估帧耗时、performance.mark/measure定位慢函数，结合DevTools与Lighthouse精准归因体验瓶颈。
JavaScript 本身无法直接读取操作系统级的 CPU 使用率（如 Linux 的 %cpu 或 Windows 任务管理器中的“CPU 占用百分比”），浏览器出于安全隔离限制，不暴露这类系统指标。但前端仍可通过间接测量 + 浏览器原生 API + 辅助工具，有效监控与内存、CPU 密切相关的运行时核心性能表现——重点是识别内存泄漏、主线程阻塞、JS 执行压力等真实影响用户体验的问题。
监控 JavaScript 内存使用（浏览器环境）
Chrome 等主流浏览器提供 performance.memory（非标准但广泛支持），是前端最直接的内存观测入口：
-
关键字段：
usedJSHeapSize（已用堆内存）、totalJSHeapSize（堆总大小）、jsHeapSizeLimit（堆上限）。单位均为字节。 -
实用判断逻辑：
- 若
usedJSHeapSize / totalJSHeapSize > 0.8且持续上升 → 存在内存压力或泄漏风险； - 多次采集发现
usedJSHeapSize在用户操作后不回落 → 可疑内存泄漏（如未解绑事件、缓存未清理、分离 DOM 未释放）。
- 若
-
兼容写法（避免报错）：
if (performance.memory) { console.log(performance.memory.usedJSHeapSize); } -
补充手段：
- DevTools → Memory 面板 → 拍摄堆快照（Heap Snapshot），对比操作前后对象数量变化；
- 筛选
Detached DOM tree查找未卸载却仍被 JS 引用的 DOM 节点； - 使用
performance.getEntriesByType('resource')分析大体积 JS/CSS 加载是否引发内存突增。
评估 CPU 压力与主线程负载（替代 CPU 使用率）
不依赖“%CPU”，而是聚焦主线程是否被 JS 长时间独占——这才是导致卡顿、掉帧、交互延迟的根源：
-
长任务（Long Tasks）API：
- 监听
entryTypes: ['longtask']，捕获所有 ≥50ms 的主线程执行块； - 每个
LongTaskentry 包含startTime、duration、attribution（可定位到具体脚本/框架）； - 示例：
new PerformanceObserver(cb).observe({entryTypes: ['longtask']});
- 监听
-
FPS 与帧耗时：
- 通过
requestAnimationFrame计算每帧渲染耗时，持续低于 16.6ms（即 ≥60fps）才流畅； - DevTools → Performance 面板录制 → 查看“Frames”轨，红色标记表示掉帧（>16.6ms）；
- 结合
PerformanceObserver监听entryTypes: ['frame']（需 Chrome 120+）获取帧数据。
- 通过
-
函数级耗时打点：
- 对高频/关键函数（如滚动处理器、渲染逻辑）包裹
performance.mark()和performance.measure()； - 统计 P95/P99 耗时，识别慢函数（例如某次
renderList耗时 120ms → 主线程阻塞主因）。
- 对高频/关键函数（如滚动处理器、渲染逻辑）包裹
生产环境落地建议
监控不是为了看数字，而是为了快速归因和告警：
立即学习“Java免费学习笔记（深入）”；
-
内存趋势上报：每 30 秒采样一次
performance.memory，仅上报usedJSHeapSize和比值，聚合分析上升斜率； -
长任务自动归因：捕获
longtask后，提取attribution[0].url和调用栈前两层，关联 sourcemap 定位问题代码行； -
避免监控反伤性能：
- 禁用
performance.memory高频轮询（≤1 次/分钟）； - 长任务监听开启即可，无需主动遍历
getEntries()； - 使用
navigator.sendBeacon()上报，不阻塞页面卸载。
- 禁用
-
辅助验证工具：
- Chrome 任务管理器（Shift+Esc）→ 开启 “JavaScript memory” 列，观察 tab 级内存曲线；
- Lighthouse 报告中 “Diagnostics” 板块会提示 “Avoid large, complex render trees”、“Reduce JavaScript execution time” 等 CPU 相关建议。
本质上，前端不需要知道 CPU 占用了 73%，而需要知道“为什么用户滑动列表时掉帧”“为什么点击按钮要等 800ms 才响应”。用好 memory、longtask、frame 和精准打点，就能抓住真正影响体验的瓶颈。
