自研前端监控系统总结(SDK篇)-性能监控

本文总结了自研前端监控系统中SDK的实现,重点探讨了页面性能和资源加载性能的监控。利用window.performance API获取页面加载的详细时间信息,通过Performance接口结合Navigation Timing API等监测首屏加载性能。对于SPA应用,通过Vue的全局前置守卫和组件钩子计算路由切换的加载时间。同时,使用Resource Timing API收集资源加载时间,关注js、css、img等不同类型的加载情况。
摘要由CSDN通过智能技术生成

对我司自研的前端监控系统的前端SDK进行总结

页面性能

性能数据采集需要使用 window.performance API。 

Performance 接口可以获取到当前页面中与性能相关的信息,它是 High Resolution Time API 的一部分,同时也融合了 Performance Timeline API、Navigation Timing API、 User Timing API 和 Resource Timing API。

从 MDN 的文档可以看出,window.performance.timing 包含了页面加载各个阶段的起始及结束时间。

这些属性需要结合下图一起看,更好理解:

以下是对timing写的简介

timing: {
        // 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面,这个值会和fe
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值