Lighthouse 不执行 JS，仅静态扫描 DOM，HTML 结构直接决定 Accessibility 和 SEO 分数；img 缺 alt、form 无 label、div 冒充按钮等均会扣分。
不需要改 HTML 就能运行 Lighthouse，但 HTML 写法会直接决定 Accessibility 和 SEO 分数——尤其当 img 缺 alt、form 控件没 label、或用 div 冒充按钮时，Lighthouse 会当场扣分。
Chrome DevTools 里怎么开 Lighthouse
新版 Chrome（≥ v110）已原生集成，无需插件或命令行：
- 打开目标网页（确保加载完成，不是重定向中或空白页）
- 按
Ctrl+Shift+I（Windows/Linux）或Cmd+Option+I（macOS）唤出 DevTools - 点击顶部标签栏的
Lighthouse—— 若没看到，点右上角⋯ → More tools → Lighthouse - 勾选要审计的类别（如只关心性能，就只留
Performance；若顺带查无障碍，必须勾Accessibility） - 设备选
Mobile或Desktop：移动模式会模拟 UA 和 viewport，影响渲染结果 - 点击
Analyze page load（不是旧版的 “Generate report”）
Lighthouse 为什么对 HTML 结构敏感
它不执行 JS，只静态扫描 DOM 树和属性。常见扣分点全是 HTML 层面的硬伤：
-
img没alt，或alt=""却没加role="presentation"（装饰图需显式声明） -
button、a等可交互元素内无文本内容，仅靠 SVG 或 iconfont 且没aria-label -
input或select缺失label，或用了for="xxx"但对应id不存在/拼错 - 用
div onclick="...">模拟按钮，却没加role="button" tabindex="0" - 颜色对比度不足：Lighthouse 会提取
color和background-color计算，但前提是文本节点有明确 CSS 继承链（内联样式写死颜色反而难检测）
哪些 HTML 修改能快速提分
不动逻辑、不加 JS，纯 HTML 调整就能修复约 70% 的无障碍警告：
立即学习“前端免费学习笔记（深入）”；
- 给所有功能性图片补
alt；纯装饰图统一写alt="" role="presentation" - 把
<div onclick="submit()">提交</div>改成<button type="button">提交</button> - 表单字段旁加
<label for="email">邮箱</label><input id="email">（for和id必须完全一致） - 导航菜单用
<nav>包裹，主标题用<h1>，别跳级（如h1后直接h3） - 避免在 HTML 里写
style="color: #333; background: #fff;"，改用 CSS 类，方便后期统一调对比度
测试前最容易被忽略的细节
很多人跑完报告就关掉，但真正卡分的常藏在上下文里：
- 必须禁用所有浏览器扩展（尤其是广告屏蔽、Dark Mode 插件），它们可能注入 DOM 或劫持样式
- 别在隐身窗口测试——某些扩展在隐身模式下仍生效，且 Lighthouse 无法捕获 Service Worker 缓存行为
- 测试前清空缓存并禁用网络限速（除非你专门测弱网场景），否则 LCP、CLS 等指标波动极大
- 移动端测试务必关掉“启用触控模拟”，否则会干扰交互类指标（如 FID）的采集
HTML 本身不参与性能计算（如 LCP、TTI），但它决定了 Accessibility 和 SEO 分数能否及格；而这两项一旦拉低总分，再快的 JS 也救不回来——结构问题得从 DOM 根上修。
