前端性能分析工具-Lighthouse
1、前言
2、简介
3、使用
1、前言
对于前端开发人员来说,除了实现页面功能外,那就是页面的性能响应问题也要关注。同样对于测试人员在进行性能测试时,也要关注前端页面的性能指标。测试前端性能市面上可以用到的工具也比较多,比如可以用 HttpWatch 进行页面的抓取与分析,或者也可以使用抓包工具如 Fiddler 抓接口的形式进行分析。
本篇将介绍一款前端性能分析工具,即集成在 Chrome 开发者工具-Lighthouse。
2、简介
Lighthouse 用于分析 Web 应用程序和网页,收集性能指标和对开发人员最佳实践的见解。
架构图:
github地址:
https://github.com/GoogleChrome/lighthouse
3、使用
前提:需要安装 Chrome 浏览器。
1、打开 Chrome 浏览器,跳转到要进行性能监控的页面,例如作者的 CSDN 地址:https://blog.csdn.net/wangmcn
2、之后打开 Chrome 开发者工具(快捷键 F12)。
选择 Lighthouse 面板,设备可选择移动或桌面,如图所示设备为桌面。
然后点击“生成报告”。
运行完成后,展示性能测试报告,例如性能分数打78分。
查看性能原始跟踪。
并同时给出了一些诊断建议信息。
可访问性分数打了71分,并给出改进建议。
如图所示设备为移动时,分析过程中的效果。
最后可将报告进行打印、拷贝、下载等操作。
本文分享自 AllTests软件测试 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!