前端性能监控window.performance的巧妙写法

shleyZ 发布于2019-08-20 19:01 / 1331人阅读

摘要：常规用法相信很多人都在使用来监控页面的性能。这样的写法有两个好处不必局限于方法了，可以在任何时候执行保证不为，避免脏数据好处多多是不是要改进下上报的写法呢。

performance常规用法

相信很多人都在使用window.performance来监控页面的性能。都会在页面onload后，去获取window.performance.timing

但如果真正分析过数据的人，都会发现window.performance.timing.loadEventEnd有些时候在onload时间触发后
还是为0

这时候可能有些人会延迟再重新获取一次

这里带来另外一种思路实现

performance万无一失的用法

(function(){
    if (window.performance || window.webkitPerformance) {
        var perf = window.performance || window.webkitPerformance;
        var timing = perf.timing;
        var navi = perf.navigation;
        var timer = setInterval(function() {
            if (0 !== timing.loadEventEnd) {
                clearInterval(timer);
                var data = {
                    url: window.location.href,
                    ua: window.navigator.userAgent,
                    dns :timing.domainLookupEnd - timing.domainLookupStart,
                    tcp :timing.connectEnd - timing.connectStart,
                    request : timing.responseEnd -timing.responseStart,
                    blank : timing.domLoading - timing.fetchStart,
                    domready : timing.domContentLoadedEventEnd - timing.fetchStart,
                    onload : timing.loadEventEnd - timing.fetchStart,
                    firstimagetime : 0,
                    isdirty : 0
                };

用了一个定时器去判断timing.loadEventEnd不等于0的时候才去上报。

这样的写法有两个好处
1 不必局限于onload方法了，可以在任何时候执行
2 保证loadEventEnd不为0，避免脏数据

好处多多...是不是要改进下上报的写法呢。

海外云主机服务器托管监控服务器的性能一段巧妙的css 应用系统的性能监控有哪几类前端性能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85028.html

前端质量监控之页面性能相关

摘要：前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作为个人学习记录，如有错误，敬请斧正页面整体性能通过浏览器提供的方法，我们能够得到网页每个处理阶段前言最近有幸参与一个前端质量监控类项目的重构，算是个人初次接触到前端质量监控相关的知识，对于其中的性能统计部分很感兴趣，查询资料之后写了文章，作...

Shihira 2019-08-23 12:56 评论0 收藏0
在单页应用中，如何优雅的上报前端性能数据

摘要：本文的介绍的是如何设计一个通用的可以以较小的侵入性，自动上报前端的性能数据。具体的做法可以看我的上一篇文章在单页应用中，如何优雅的监听的变化。三如何上报性能数据那么如何上报性能数据呢，我们第一反应就是通过请求的形式来上报前端性能数据。最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时...

KitorinZero 2019-08-30 15:55 评论0 收藏0
在单页应用中，如何优雅的上报前端性能数据

摘要：本文的介绍的是如何设计一个通用的可以以较小的侵入性，自动上报前端的性能数据。具体的做法可以看我的上一篇文章在单页应用中，如何优雅的监听的变化。三如何上报性能数据那么如何上报性能数据呢，我们第一反应就是通过请求的形式来上报前端性能数据。最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时...

curried 2019-08-02 14:07 评论0 收藏0
在单页应用中，如何优雅的上报前端性能数据

摘要：本文的介绍的是如何设计一个通用的可以以较小的侵入性，自动上报前端的性能数据。具体的做法可以看我的上一篇文章在单页应用中，如何优雅的监听的变化。三如何上报性能数据那么如何上报性能数据呢，我们第一反应就是通过请求的形式来上报前端性能数据。最近在做一个较为通用的前端性能监控平台，区别于前端异常监控，前端的性能监控主要需要上报和展示的是前端的性能数据，包括首页渲染时间、每个页面的白屏时...

beanlam 2019-08-23 14:41 评论0 收藏0