chrome devtools 通过设备模拟、cpu与网络节流组合实现跨设备性能对比：设备模式模拟尺寸/dpr/触摸，节流配置模拟低端机与弱网，再录制对比fps、tti、lcp等指标变化。
Chrome DevTools 本身不直接“对比不同设备”，但它提供了模拟不同设备硬件与网络条件的能力，让你在一台电脑上复现并分析移动端、低端机、弱网等真实场景下的性能表现。关键在于用好 设备模拟 + 节流配置 + 多次录制对比 这套组合。
? 设备尺寸与交互行为模拟
DevTools 的设备模式（Device Toolbar，快捷键 Ctrl+Shift+M / Cmd+Shift+M）能快速切换屏幕尺寸、像素比（DPR）、触摸支持和用户代理（UA）：
- 选预设设备（如 iPhone 12、Pixel 5），自动应用对应宽高、DPR 和 UA
- 手动调整 viewport 尺寸，测试响应式断点是否触发正确布局
- 勾选 “Touch simulation” 模拟手指点击/滑动，触发 touch 事件监听逻辑
- 注意：这只是 UI 和事件层面的模拟，不影响 CPU 或内存性能，需配合节流使用
⚙️ CPU 与网络节流 —— 模拟真实设备能力
这才是分析“性能差异”的核心：
-
CPU 节流（CPU Throttling）
在 Performance 面板右上角齿轮 → 设置中启用：-
2x slowdown：适合中端安卓机 -
4x slowdown：更贴近低端 Android 或旧款 iPhone - 效果：JavaScript 执行变慢、渲染帧率下降、长任务更容易暴露
-
-
网络节流（Throttling）
在 Network 面板或 Performance 设置中选择：-
Fast 3G（默认推荐）：约 1.6 Mbps 下载 / 750 Kbps 上传，RTT ~150ms -
Slow 3G或自定义：模拟信号差、基站远的场景 - 同时勾选
Disable cache，确保每次都是首屏加载体验
-
✅ 实操建议：固定一个基准（如 Desktop + No Throttle），再分别录制
4x CPU + Fast 3G和No Throttle + Online两组数据，横向对比 FPS、TTI、LCP 等指标变化。
? 对比分析的关键维度
录制完成后，在 Performance 面板中重点比对以下几项：
- FPS 曲线波动：移动端节流后是否频繁跌破 30？哪段交互（如滚动、弹窗）掉帧最严重？
- 主线程火焰图（Main）：节流后长任务（>50ms）是否显著增多？是否集中在某个库（如 moment.js、lodash）或业务函数？
- 内存曲线（Memory track）：弱网+节流下，是否因资源反复加载/重绘导致内存持续攀升？
- 网络瀑布图（Network track）：同一资源在 Fast 3G 下是否因 DNS/TCP 延迟拉长等待时间？是否出现串行阻塞？
? 补充验证方式
- 隐身窗口 + 多次录制：避免插件/缓存干扰，确保每次测试环境干净
- 保存录制文件（.json）：可导出不同配置下的 profile，用 Perfume.js 或 Chrome 自带的 Compare 功能做差异分析
-
真机调试（可选）：通过
chrome://inspect连接 Android 设备，直接采集真实 CPU 和渲染数据，弥补模拟局限
不复杂但容易忽略。
