可通过浏览器开发者工具结合Performance API等HTML原生接口诊断设备性能：一、用performance.getEntriesByType获取导航与资源加载数据，performance.memory查内存；二、requestIdleCallback测主线程空闲延迟；三、requestAnimationFrame计算FPS评估渲染稳定性；四、读取offsetHeight触发重排并计时评估DOM布局成本；五、setTimeout配合performance.now()检测事件循环延迟。
如果您希望评估当前设备的运行能力，可通过浏览器内置的开发者工具与HTML相关API组合进行基础性能探测。以下是执行该诊断操作的具体步骤：
一、使用Performance API获取页面加载与运行时指标
Performance API 是浏览器原生提供的接口，可读取导航、资源加载、事件循环延迟等底层性能数据，无需外部依赖即可直接调用。
1、在网页中按 F12 打开开发者工具，切换到 Console 面板。
2、输入 performance.getEntriesByType('navigation') 并回车，查看页面导航性能记录。
立即学习“前端免费学习笔记（深入）”；
3、输入 performance.getEntriesByType('resource') 并回车，获取所有已加载资源的耗时详情。
4、输入 performance.memory（如支持）并回车，检查内存使用情况（仅部分浏览器启用）。
二、通过 requestIdleCallback 观测主线程空闲状态
该函数用于在浏览器空闲时段执行低优先级任务，其回调触发频率和延迟可间接反映设备主线程负载压力。
1、在 Console 中执行以下代码：
let start = performance.now(); requestIdleCallback(() => { console.log('空闲延迟：', performance.now() - start, 'ms'); });
2、重复执行多次，观察输出数值。若多数结果大于 50ms，表明主线程持续繁忙。
3、在页面滚动或交互后立即执行该代码，对比空闲延迟变化幅度。
三、利用 FPS 监控循环检测渲染帧率稳定性
通过 requestAnimationFrame 连续采样时间戳，计算每秒实际渲染帧数，判断 GPU 与渲染管线是否处于稳定输出状态。
1、在 Console 中粘贴并运行以下代码：
let lastTime = performance.now(); let frameCount = 0; function checkFPS() { frameCount++; const now = performance.now(); if (now - lastTime >= 1000) { console.log('当前FPS：', frameCount); frameCount = 0; lastTime = now; } requestAnimationFrame(checkFPS); } checkFPS();
2、保持页面静止 5 秒，记录控制台输出的 FPS 值。持续低于 45 表示渲染性能受限。
3、手动快速滚动页面或触发动画，再次观察 FPS 是否骤降至 20 以下。
四、触发强制重排（reflow）并测量布局耗时
通过读取 offsetHeight 等会触发同步布局的属性，结合 performance.now() 测量重排开销，评估 DOM 复杂度对性能的影响。
1、确保页面存在至少一个具有明确样式的块级元素（如 id="test-box" 的 div）。
2、在 Console 中执行：
const el = document.getElementById('test-box'); const t0 = performance.now(); el.offsetHeight; const t1 = performance.now(); console.log('重排耗时：', t1 - t0, 'ms');
3、对不同深度嵌套或含大量 CSS 计算的元素重复该操作，若单次耗时超过 3.5ms，说明布局成本过高。
五、检测事件循环延迟（Task Queue Latency）
使用 setTimeout 与 performance.now() 组合，估算任务队列积压程度，反映 JavaScript 主线程调度响应能力。
1、在 Console 中执行以下代码：
let delays = []; for (let i = 0; i { delays.push(performance.now() - start); }, 0); } setTimeout(() => { console.log('平均任务延迟：', (delays.reduce((a, b) => a + b, 0) / delays.length).toFixed(2), 'ms'); }, 100);
2、等待输出结果。若平均值高于 8ms，表示事件循环存在明显阻塞。
3、在执行大型脚本（如 JSON 解析、Canvas 绘图）后立即运行该检测，对比延迟增幅。
