前端性能分析工具-Lighthouse
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分,并给出改进建议。
如图所示设备为移动时,分析过程中的效果。
最后可将报告进行打印、拷贝、下载等操作。
最后: 可以在公众号:伤心的辣条 ! 自行领取一份216页软件测试工程师面试宝典文档资料【免费的】。以及相对应的视频学习教程免费分享!,其中包括了有基础知识、Linux必备、Shell、互联网程序原理、Mysql数据库、抓包工具专题、接口测试工具、测试进阶-Python编程、Web自动化测试、APP自动化测试、接口自动化测试、测试高级持续集成、测试架构开发测试框架、性能测试、安全测试等。
现在我邀请你进入我们的软件测试学习交流群:【746506216
】,备注“入群”, 大家可以一起探讨交流软件测试,共同学习软件测试技术、面试等软件测试方方面面,还会有免费直播课,收获更多测试技巧,我们一起进阶Python自动化测试/测试开发,走向高薪之路。
喜欢软件测试的小伙伴们,如果我的博客对你有帮助、如果你喜欢我的博客内容,请 “点赞” “评论” “收藏” 一 键三连哦!
前端性能分析工具-Lighthouse相关推荐
- 前端性能分析工具利器
作者:basinwang,腾讯 PCG 前端开发工程师 大型项目容易遇到性能问题,一般来说,当我们遇到性能瓶颈的时候,才会开始去进行相应的分析.分析的方向除了业务本身的特点相关之外,常见的还可以借助一 ...
- 前端性能分析工具Dyna Trace使用心得(转)
什么是dynatrace ajax "dynatrace ajax 是一个详细的底层追踪工具,它不仅可以显示所有请求和文件在网络中传输的时间,还会记录浏览器render,CPU消耗.JS解析 ...
- 前端性能分析工具:dynaTrace Ajax Edition
从John Resig的Deep Tracing of Internet Explorer了解到了这款刚发布的免费的前端性能分析工具,John Resig对其评价甚高:"I typicall ...
- 前端性能优化工具 - Lighthouse
Lighthouse是一个Google开源的自动化工具,主要用于改进网络应用(移动端)的质量.目前测试项包括页面性能.PWA.可访问性(无障碍).最佳实践.SEO.Lighthouse会对各个测试项的 ...
- 怎样用谷歌浏览器测试软件性能,Chrome性能分析工具lightHouse用法指南
使用id名称和name直接获取元素 我们知道一些第三方的js库对如何快速选取html中的元素做了一些简化,貌似十分高深莫测,其实也不然.而且js本身自带了对于特殊元素的简便选取的方法,下面就为大家简单 ...
- dynaTrace Ajax:前端性能分析利器
什么是 dynaTrace Ajax 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的.dynaTrace ...
- Ajax 前端性能分析利器:dynaTrace
什么是 dynaTrace Ajax 随着 jQuery.Dojo.YUI 等框架的兴起让构建 Web2.0 应用更加容易,但随之带来的定位等应用问题也越来越难,尤其是与性能相关的.dynaTrace ...
- Keepfast 是前端一个性能分析工具
简介 Keepfast 是一个性能分析工具,能够分析网站的资源构建性能和页面性能,生成性能报告并提供优化建议,让性能监控更方便. 主要特性: 分析并生成构建性能报告,可直观的对比两个版本的构建性能,以 ...
- 系统级性能分析工具perf的介绍与使用
测试环境:Ubuntu16.04 + Kernel:4.4.0-31 apt-get install linux-source cd /usr/src/tools/perf make &&am ...
最新文章
- 一种关注于重要样本的目标检测方法!
- android 显示 PDF 文件
- appium安装部署第二季
- python环境变量配置_21 python环境的配置
- 把canvas标签里的图像下载成本地图片文件
- 最大公约数和最小公倍数问题(洛谷P1029题题解,Java语言描述)
- 主流的分布式事务解决框架
- c语言课后答案谢延红,C语言程序设计基础第4,5章 课后习题答案
- idea默认文件类型关联
- pytorch自我错误总结
- ActivityGroup对子Activity的管理
- android手机网络Ping测试
- sslv3 poodle漏洞 检测解决方法
- 高通 QSD MSM APQ区别
- 数据结构第七次作业·第四题·北京地铁线路查询Dijkstra算法
- 台式计算机可以连接蓝牙吗,蓝牙耳机怎么连接台式电脑?台式电脑连接蓝牙耳机的方法...
- Cura切片3d打印设置
- 分子遗传学重点(可缩印)
- 全网首发!老大众奥迪碟盒通信协议破解,可以模拟数码碟盒,外接AUX蓝牙U盘等音频设备
- 内存不能读写问题解决方案
热门文章
- Python碎片化学习教程 @19. 在指定路径下创建.txt文件,并写入内容
- query.unwrap(SQLQuery.class).setResultTransformer弃用
- 笑死了,程序猿是这么过情人节的
- 在SLAM中如何拼接使用多个激光雷达传感器数据
- 5G将改变哪些产业的发展模式?
- 育境宏海给你科普一下tiktok收入最高的海外网红
- oh my 毕设-人体姿态估计-简介应用场景
- ClickHouse系列-架构概述
- Java解压RAR文件的几种方式
- FiddlerEverywhere抓包微信小程序(pc端)