前端监控元素是否发生了位置的改变

1、前言

对于前端开发人员来说，除了实现页面功能外，那就是页面的性能响应问题也要关注。同样对于测试人员在进行性能测试时，也要关注前端页面的性能指标。测试前端性能市面上可以用到的工具也比较多，比如可以用 HttpWatch 进行页面的抓取与分析，或者也可以使用抓包工具如 Fiddler 抓接口的形式进行分析。

本篇将介绍一款前端性能分析工具，即集成在 Chrome 开发者工具-Lighthouse。

2、简介

Lighthouse 用于分析 Web 应用程序和网页，收集性能指标和对开发人员最佳实践的见解。

架构图：

github地址：

https://github.com/GoogleChrome/lighthouse

3、使用

前提：需要安装 Chrome 浏览器。

1、打开 Chrome 浏览器，跳转到要进行性能监控的页面，例如作者的 CSDN 地址：

2、之后打开 Chrome 开发者工具（快捷键 F12）。

选择 Lighthouse 面板，设备可选择移动或桌面，如图所示设备为桌面。

然后点击“生成报告”。

运行完成后，展示性能测试报告，例如性能分数打78分。

查看性能原始跟踪。

并同时给出了一些诊断建议信息。

可访问性分数打了71分，并给出改进建议。

如图所示设备为移动时，分析过程中的效果。

最后可将报告进行打印、拷贝、下载等操作。