亲测!!! | 一期分享常用的性能检测工具&方法

最新推荐文章于 2025-02-06 09:43:26 发布

一个努力冲出体制的互联网女工

最新推荐文章于 2025-02-06 09:43:26 发布

阅读量1.7k

点赞数 27

文章标签：性能优化学习

本文链接：https://blog.youkuaiyun.com/xzT521xs/article/details/143434483

版权

浏览器插件类

1. chrome的帧率检测工具

工具下载

chrome添加帧率检测工具并开启之后，会实时检测当前页面的fps值，如果值存在长时间低于30fps，那么是影响感官使用的，流畅度没有那么高的。

2. Vue.js devtools

工具下载

chrome自带的vue开发工具，安装完成之后控制栏中会有vue的tab标签显示。在左侧选中组件模式之后，我们刷新页面会看到每个组件的更新时间，如果组件更新时间很久那说明性能有问题，有地方阻塞了。

chrome开发者工具

1. Lighthouse

点击右上角按钮就会自动进行页面loading进行分析，给出报告性能测试报告。有lcp，fcp，tbt等关键指标。同时会有相关指标的一些明细，可以点击查看。

2. Performance

页面可以进行录制，也可以点击刷新按钮开始从头录制。是一个非常强大的性能检测工具。

从头开始录制时能看到fcp,lcp等关键指标，同时页面的帧率网络请求等也一应俱全。如果排查问题基本都能涵盖。

当现实红色表示有堵塞，可以点击之后查看底部调用栈，右侧同时会显示哪行代码可能非常耗时，这个就容易进行定位到问题。

性能监控

1. Sentry

目前项目内都基本有sentry监控，sentry可以监控的内容比较多。sentry可以监听项目的error，也可以传输一个指标，我们可以利用这个进行监控。

2. window.performance

浏览器的内置对象可以监听一些性能数据

Timing 和performance.getEntriesByType("navigation")

navigationStart：浏览器处理当前网页的启动时间
fetchStart：浏览器发起http请求读取文档的毫秒时间戳。
domainLookupStart：域名查询开始时的时间戳。
domainLookupEnd：域名查询结束时的时间戳。
connectStart：http请求开始向服务器发送的时间戳。
connectEnd：浏览器与服务器连接建立（握手和认证过程结束）的毫秒时间戳。
requestStart：浏览器向服务器发出http请求时的时间戳。或者开始读取本地缓存时。
responseStart：浏览器从服务器（或读取本地缓存）收到第一个字节时的时间戳。
responseEnd：浏览器从服务器收到最后一个字节时的毫秒时间戳。
domLoading：浏览器开始解析网页DOM结构的时间。
domInteractive：网页dom树创建完成，开始加载内嵌资源的时间。
domContentLoadedEventStart：网页DOMContentLoaded事件发生时的时间戳。
domContentLoadedEventEnd：网页所有需要执行的脚本执行完成时的时间，domReady的时间。
domComplete：网页dom结构生成时的时间戳。
loadEventStart：当前网页load事件的回调函数开始执行的时间戳。
loadEventEnd：当前网页load事件的回调函数结束运行时的时间戳。

通过两两相减能得到时间差值

performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数。

我们可以利用这个函数在请求前后添加进行相减然后取比较大的值进行上报接口。
performance.getEntriesByName('first-contentful-paint')[0]可以获取fcp的时间
LCP时间计算（和performance工具对比过基本相等，微前端会有两个时间）

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    console.log('LCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'largest-contentful-paint', buffered: true});

其他

目前是有一些网站工具可以检测，在该网站进行输入网址之后检测。

通过这些工具和方法，能够及时发现并解决了许多性能瓶颈问题。但我知道，性能检测是一个不断发展的领域，总有新的工具和方法出现。

结束语：

分享到这里，我已经介绍了我在使用性能检测工具和方法中的一些心得。我相信，每个人都有自己独特的经验和偏好。因此，我非常期待听到大家的声音：

你在使用性能检测时有哪些心得体会？
有没有哪些工具或方法让你觉得特别有效？
在性能优化的过程中，你遇到过哪些挑战，又是如何克服的？

请在评论区留下你的故事，让我们一起交流学习，共同进步。期待你的分享！