必须用Lighthouse精准定位前端性能问题，它通过采集LCP、FCP、CLS、TBT等指标并关联资源代码行来定位根源；推荐开发者工具方式（需关闭其他标签页和扩展）、官方扩展（适合非技术人员）及命令行（适合CI自动化）。
要精准定位网页加载慢、交互卡顿、布局跳动等前端性能问题根源，必须借助谷歌浏览器内置的Lighthouse工具执行标准化审计，它能自动采集LCP、FCP、CLS、TBT等核心指标并关联具体资源与代码行。
通过开发者工具启动Lighthouse审计
这是最直接、无需安装依赖的方式，适用于所有Chrome 60+版本，且能完整捕获页面首次加载全过程，【必须关闭其他标签页并禁用所有扩展，否则第三方脚本会污染审计结果】。
1、在Chrome中打开待测网页，确保URL栏显示的是目标地址（非重定向后地址）。
2、按 Command + Option + I（Mac）或 F12（Windows/Linux）打开开发者工具。
3、点击顶部标签栏中的“Lighthouse”选项卡；若未看到，先点击右上角“⋯”→“More tools”→“Lighthouse”启用。
4、在左侧面板中：勾选“Performance”类别；勾选“Mobile”设备模式；在“Throttling”下拉菜单中选择“Slow 4G + 4x CPU slowdown”——这模拟真实弱网低配设备，避免本地高速环境掩盖瓶颈。
5、务必勾选“Clear storage”复选框，强制清空缓存与本地存储，否则重复测试会复用已缓存资源，导致LCP、FCP等指标虚高。
6、点击“Generate report”按钮，Lighthouse将自动刷新页面并执行完整加载周期审计，耗时约30–90秒。
使用官方扩展程序快速复测
适合需要跨多个子页面批量检测、或不熟悉开发者工具界面的运营/产品人员，报告以独立HTML文件形式打开，便于截图分享。
方法一：一键生成桌面端报告
1、访问Chrome网上应用店，搜索“Lighthouse”，认准发布者为Google LLC，点击“添加至Chrome”。
2、安装后刷新目标网页，在浏览器右上角找到蓝色灯塔图标。
3、点击图标→弹出窗口中取消勾选“Accessibility”“SEO”等非必要项，仅保留“Performance”。
4、点击“Generate report”，等待分析完成，新标签页自动打开HTML报告。
方法二：对比不同环境下的性能差异
1、保持扩展开启状态，先对当前页面执行一次默认设置的报告（移动设备+节流）。
2、再次点击灯塔图标→在设置中切换“Device”为“Desktop”，取消勾选“Simulated throttling”。
3、点击“Generate report”，获得无节流的桌面端基准数据。
4、将两份HTML报告并排打开，重点比对LCP数值变化——若移动版LCP是3.8s而桌面版仅0.9s，说明首屏大图或字体加载策略存在明显适配缺陷。
命令行方式精准复现与持续验证
开发者用此方式可绕过浏览器UI干扰，锁定特定网络与CPU条件，并导出JSON用于自动化比对。特别适用于CI流程中拦截性能退化。
第一步：安装与基础运行
1、确认已安装Node.js 18.0+，终端执行：npm install -g lighthouse。
2、运行指令：lighthouse https://example.com --output=html --output-path=./report.html --view --emulated-form-factor=mobile --throttling-method=devtools。
第二步：排除登录态干扰
某些页面需登录才可见核心功能，直接运行会审计到登录页。此时必须手动介入：
• 先在Chrome中登录目标网站并保持标签页打开；
• 终端执行：lighthouse http://localhost:3000 --preset=desktop --disable-network-throttling --disable-storage-reset；
【--disable-storage-reset参数不可省略，否则登录态cookie会被清除】。
第三步：提取关键指标做阈值校验
执行：lighthouse https://example.com --output=json --output-path=./report.json --quiet --chrome-flags="--headless"，生成纯JSON；
用脚本读取audits['largest-contentful-paint'].numericValue，若大于2500（毫秒），即触发告警。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
