资讯专栏INFORMATION COLUMN

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

shleyZ / 1400人阅读

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

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,避免脏数据

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

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

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

相关文章

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

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

    Shihira 评论0 收藏0
  • 在单页应用中,如何优雅上报前端性能数据

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

    KitorinZero 评论0 收藏0
  • 在单页应用中,如何优雅上报前端性能数据

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

    curried 评论0 收藏0
  • 在单页应用中,如何优雅上报前端性能数据

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

    beanlam 评论0 收藏0

发表评论

0条评论

shleyZ

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<