硬件参数比猜浏览器兼容性更可靠：navigator.hardwareconcurrency≤2时避开offscreencanvas等高负载api，≥4可安全使用queuemicrotask等；performance.memory接近上限或loadeventend>5000ms需分别优化内存和脚本加载。
直接看硬件参数比猜浏览器兼容性更可靠——HTML本身没函数，所谓“HTML函数工具”实际指你在写 document.getElementById、requestAnimationFrame、srcset 这类 JS 或 HTML 属性时，是否会被当前设备拖慢甚至失效。
查 navigator.hardwareConcurrency 判断多核处理能力
这个值决定你能不能安全用 Web Workers 或并行 DOM 批量操作。在控制台运行：
console.log(navigator.hardwareConcurrency)
返回值 ≤ 2：说明是单核或双核低端 CPU（如 Intel Celeron N305、ARM Cortex-A7），应避开 OffscreenCanvas、大量 Promise.all 并发请求；返回值 ≥ 4：可放心用 queueMicrotask 拆分长任务、启用 IntersectionObserver 监听滚动。
常见误区：navigator.hardwareConcurrency 在旧版 Safari 和部分 Android WebView 中返回 undefined，此时需 fallback 到 performance.now() 长任务检测。
跑 performance.memory 看 JS 堆是否吃紧
内存小于 2GB 的设备（如 Chromebook、Android Go 手机）容易因 JS 对象堆积导致卡顿甚至崩溃。执行：
console.log(performance.memory)
若返回对象中 usedJSHeapSize 接近 totalJSHeapSize（比如相差
- 禁用所有非必要
console.log，尤其在循环里 - 避免用
innerHTML +=，改用DocumentFragment+textContent - 手动清理闭包引用，比如在
unload事件中清空Map或Set
注意：performance.memory 在 Chrome 需加启动参数 --enable-precise-memory-info 才可用；Firefox 不支持，得用 about:memory 手动对比。
测 CSS.supports('transform', 'translateZ(0)') 看 GPU 是否可用
不是所有“有显卡”的设备都真能硬件加速。执行：
console.log(CSS.supports('transform', 'translateZ(0)'))
返回 false 时，说明：
- 设备无独立/合格集成显卡（如 Intel HD Graphics 400）
- 浏览器禁用了硬件加速（Windows 设置 → 系统 → 显示 → 图形设置 → 浏览器设为“节能”）
- 你正在用远程桌面或虚拟机，GPU 直通未开启
此时硬加 style="transform: translateZ(0)" 反而会触发软件渲染，让动画更卡。应改用 will-change: scroll-position 或纯 JS 定时器驱动位移。
用 performance.getEntriesByType('navigation') 看首屏瓶颈在哪
这个 API 能暴露真实硬件限制点。运行：
console.log(performance.getEntriesByType('navigation')[0])
重点看三个字段：
-
domContentLoadedEventEnd> 2000ms：CPU 解析 HTML/JS 太慢，优先压缩内联脚本、删eval类动态执行 -
loadEventEnd> 5000ms 但transferSize小：说明磁盘 I/O 慢（如机械硬盘读取node_modules），换 SSD 或改用 CDN 加载依赖 -
redirectCount> 0 且耗时高：网络栈受制于老旧网卡或 USB 2.0 转接，和 HTML 工具无关，别在这儿调优
真正难识别的是“CPU + 内存 + GPU”三者叠加瓶颈——比如 domContentLoadedEventEnd 高的同时 performance.memory 也逼近上限，这时候任何单一优化都收效甚微，得降级交互逻辑，比如把虚拟滚动换成分页。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
