news 2026/10/21 23:23:20

Lighthouse常用配置模板【移动端性能专项测试(生成中文报告)】

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Lighthouse常用配置模板【移动端性能专项测试(生成中文报告)】

执行命令(windows下)

lighthouse https://example.com --form-factor=mobile --only-categories=performance --locale=zh-CN --output=html --output-path=mobile-performance-report.html --chrome-flags=--headless --no-sandbox --view

1️⃣ 主体命令 + 测试目标

参数值作用
lighthouse—调用全局安装的 Lighthouse CLI(你之前npm install -g lighthouse装的那个)
https://example.com—要测试的页面 URL,Lighthouse 会启动 Chrome 真实访问它

📌example.com是 IANA 保留的官方示例域名,啥人都能访问,常用来做测试。

2️⃣ 测试环境配置(控制"怎么测")

参数作用
--form-factor=mobile模拟移动端(窄屏 + 4G + 4× CPU 慢化)。这也是默认值,显式写出来更清晰
--chrome-flags=--headless让 Chrome无头运行(不弹窗口,纯后台跑)。服务器/CI 环境必备
--no-sandbox关掉 Chrome 沙箱。在 Windows 上跑 headless 经常需要这个,不然启动会失败

⚠️--chrome-flags后面跟的是要传给 Chrome 的原生参数,可叠加,比如--chrome-flags=--headless --no-sandbox(注意分隔是空格,但实际 CLI 会把整串当作原始字符串)。

3️⃣ 测试范围(控制"测什么")

参数作用
--only-categories=performance只跑性能类审计。跳过可访问性、SEO、最佳实践等。报告更小、跑得更快

可用类别:performance/accessibility/best-practices/seo(多个用逗号分隔)。

4️⃣ 报告输出(控制"结果怎么给")

参数作用
--locale=zh-CN报告界面汉化(默认英文)
--output=html输出格式为 HTML(可同时给多个:--output=html --output=json)
--output-path=mobile-performance-report.html报告保存到当前目录的mobile-performance-report.html
--view测试完成后自动用默认浏览器打开报告,省去手动双击

测试报告

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/10/18 6:14:55

GPUImage3框架解析:从Metal渲染到滤镜链的iOS图像处理实践

如果你做过 iOS 端的图像处理,GPUImage 这个名字肯定不会陌生。GPUImage3 是这个开源图像处理框架的第三代实现,它最明显的变化就是把原来的 OpenGL ES 全部换成了 Metal,并且用 Swift 重写了一遍。更重要的是,GPUImage3 不是对老…

作者头像 李华
网站建设 2026/10/19 6:42:19

8x8 RGB LED点阵布局文件:坐标映射与驱动接口设计指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/18 15:15:14

Gin中间件洋葱模型与Context生命周期深度解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/21 15:41:36

软件构造实验一:从需求拆解到测试驱动开发的工程实践

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华
网站建设 2026/10/19 16:43:32

深入解析 markdown-it-py:设计原则、数据流与渲染机制

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

作者头像 李华