实测“不卡、不崩、不掉帧”需综合 memory、requestidlecallback、performance 面板、hardwareconcurrency 四维度：performance.memory 看 js 堆是否超 80%；requestidlecallback 延迟超 50ms（静置）或 200ms（交互）表明主线程过载；performance 火焰图中 scripting＞60%、layout/recalcstyle 密集、gpu 持续高亮分别对应 js、css/html、gpu 瓶颈；hardwareconcurrency≤2 则多 worker 加速失效；devtools 面板本身会干扰测试，应关闭冗余面板或用无痕模式。
能运行，但“不卡、不崩、不掉帧”需要实测，不能只看CPU型号或内存条数。
用 performance.memory 看 JS 堆是否快撑爆了
这个 API 直接暴露当前页面的 JavaScript 内存使用情况，是判断硬件是否吃紧最直接的信号。注意它默认在 Chrome 中不启用，需加启动参数：--enable-precise-memory-info（Windows/macOS/Linux 均适用）。
- 在控制台执行
performance.memory，重点看usedJSHeapSize和totalJSHeapSize - 如果
usedJSHeapSize > 0.8 * totalJSHeapSize且持续上升，说明内存已逼近极限——2GB 物理内存设备上，这类工具大概率会触发系统级回收甚至被 kill - 低端 Android 设备（如搭载 ARM Cortex-A7 的 Go 版手机）即使显示
totalJSHeapSize有 512MB，实际可用常不足 300MB，因为系统预留更多
用 requestIdleCallback 测主线程有没有“空闲时间片”
这不是测“能不能跑”，而是测“有没有余力”。很多 HTML 工具依赖空闲时段做低优先级任务（如自动保存、语法分析），一旦这个回调极少触发或延迟超 100ms，说明 CPU 已被占满。
- 执行
let start = performance.now(); requestIdleCallback(() => console.log('delay:', performance.now() - start)); - 静置页面 10 秒后执行，若输出值普遍 > 50ms，主线程已无余量；滚动/输入后再试，若跳到 > 200ms，说明交互负载下完全没喘息空间
- 该现象在 Intel Celeron N3060 或 AMD Athlon Silver 3050e 这类双核四线程低压 U 上极常见，不是 bug，是硬件真实能力边界
用 DevTools Performance 面板抓一次典型操作
别信“我这 i7 肯定没问题”——实际瓶颈常藏在渲染层或 DOM 操作里，和 CPU 主频关系不大。
- 录制时执行工具中最重的操作（比如加载一个含 5000 行 JSON 的预览页、拖动 Canvas 时间轴）
- 停止后看火焰图：
Scripting占比 > 60% → JS 执行拖累；Rendering中Layout或Recalculate Style长条密集 → CSS + HTML 结构引发高频重排；GPU Process区域持续高亮 → WebGL/CSS 3D 变换压垮集成显卡（如 Intel HD Graphics 400 在 1080p 下易 fallback 到 CPU 渲染） - 特别注意
Long Tasks：单个任务 > 50ms 就会导致掉帧，低端设备上一个document.querySelectorAll('*').forEach(...)就可能卡住 300ms+
查 navigator.hardwareConcurrency 看并行能力底线
这个值告诉你浏览器“愿意给你多少逻辑核心”，不是 CPU 物理核心数，而是系统允许 JS 引擎调度的并发上限。它直接影响 Web Workers 能否真正分摊压力。
- 执行
navigator.hardwareConcurrency，返回值为 2 表示最多只能开 2 个 Worker 并行处理 - 若工具内部依赖多 Worker（如大型代码分析、实时编译），而该值 ≤ 2，那所谓“多线程加速”基本失效
- 树莓派 4B 返回 4，M1 Mac 返回 8，但某些 Windows 10 S 模式平板即使硬件支持 4 核，该值也固定为 2——这是系统策略限制，无法绕过
最容易被忽略的是：DevTools 本身就在吃硬件。开着 Network、Console、Elements 三个面板录制 Performance，资源占用可能比工具本身还高。关掉不用的面板，或用无痕窗口+禁用所有扩展再测，才能看清真实瓶颈在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
