前端性能监控

末蓝、 2022-12-31 07:28 216阅读 0赞

根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance，实现前端性能监控

以下是fast3G情况下数据展示

![598aa6d51d9d030a1c23ee2d04730509.png][]![4346c18d0968474c301d6625a33e67d0.png][]

使用方法：

将下面函数引入到index.html文件 每次切换页面即可读取到信息，最好是放在打包上线后的文件中，这样可以读取dns,tcp解析时间。

各个阶段图示

![b9becd44308a004264bcb67f25899401.png][]

以下是函数封装

(function () {
    
        handleAddListener('load', getTiming)
    
        function handleAddListener(type, fn) {
            if (window.addEventListener) {
                window.addEventListener(type, fn)
            } else {
                window.attachEvent('on' + type, fn)
            }
        }
    
        function getTiming() {
            try {
                var time = performance.timing;
                var timingObj = {};
    
                var loadTime = (time.loadEventEnd - time.loadEventStart);
    
                if (loadTime < 0) {
                    setTimeout(function () {
                        getTiming();
                    }, 200);
                    return;
                }
                // 阶段耗时
                timingObj['DNS解析耗时'] = (time.domainLookupEnd - time.domainLookupStart);
                timingObj['TCP连接耗时'] = (time.connectEnd - time.connectStart);
                timingObj['SSL安全连接耗时'] = (time.connectEnd - time.secureConnectionStart);//针对https
                timingObj['网络请求耗时'] = (time.responseStart - time.requestStart);
                timingObj['数据传输耗时'] = (time.responseEnd - time.responseStart);
                timingObj['DOM解析耗时'] = (time.domInteractive - time.responseEnd);
                timingObj['资源加载耗时, 表示页面中的同步加载资源'] = (time.loadEventStart - time.domContentLoadedEventEnd);
                timingObj['前端onload执行时间'] = (time.loadEventEnd - time.loadEventStart);
    
                //性能指标(上报字段名)
                timingObj["首次渲染"] = time.responseEnd - time.fetchStart
                // timingObj["首屏时间"] =  first meaningful paint
                timingObj["首次可交互"] = time.domInteractive - time.fetchStart
                timingObj["DOMReady"] = time.domContentLoadedEventEnd - time.fetchStart
                timingObj["页面完全加载"] = time.loadEventStart - time.fetchStart
                timingObj["首包时间"] = time.responseStart - time.domainLookupStart
    
    
                for (item in timingObj) {
                    console.log(item + ":" + timingObj[item] + '毫秒(ms)');
                }
    
                console.log(performance.timing);
                console.log(performance);
    
            } catch (e) {
                console.log(timingObj)
                console.log(performance.timing);
            }
        }
    })();

转载：https://juejin.cn/post/6908977607317028877

[598aa6d51d9d030a1c23ee2d04730509.png]: https://img-blog.csdnimg.cn/img_convert/598aa6d51d9d030a1c23ee2d04730509.png
[4346c18d0968474c301d6625a33e67d0.png]: /images/20221120/a67f46c48e1c4648a807cc7dcaad7590.png
[b9becd44308a004264bcb67f25899401.png]: /images/20221120/31c79a9d84ac4db7ae22d0fd24eef706.png

发表评论取消回复

表情：

评论列表（有 0 条评论，216人围观）

还没有评论，来说两句吧...

相关阅读

相关前端性能监控和错误监控

聚沙成塔·每天进步一点点 ⭐ 专栏简介前端入门之旅：探索Web开发的奇妙世界欢迎来到前端入门之旅！感兴趣的可以订阅本专栏哦！这个专栏是为那些对Web开发感

以你之姓@/ 2024年02月05日 16:33/ 0 赞/ 6 阅读

相关前端性能监控

根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance，实现前端性能监控以下是fast3G情况下数据展示 ![598aa6d

末蓝、/ 2022年12月31日 07:28/ 0 赞/ 217 阅读

相关前端性能监控

根据W3C性能小组引入的新的API(目前IE9以上的浏览器)--window.performance，实现前端性能监控以下是fast3G情况下数据展示 ![598aa6d

柔情只为你懂/ 2022年12月29日 14:13/ 0 赞/ 236 阅读

相关前端性能优化——性能监控

文章目录基础概念代码监控 Lighthouse使用基础概念网页出现白屏原因 ![在这里插入图片描述][2020

迷南。/ 2022年11月29日 11:54/ 0 赞/ 281 阅读

相关前端性能监控

目录 1. 性能监控指标（1）感官指标（2）Performance API

本是古典何须时尚/ 2022年10月29日 03:30/ 0 赞/ 283 阅读

相关前端监控

什么时候需要监控 1.当你的应用频繁报错找不到原因的时候。2.需要分析用户兴趣爱好、购买习惯。3.需要优化程序的时候，可以做监控收集数据，做针对性的优化。4.需要保证服务

女爷i/ 2022年09月03日 11:12/ 0 赞/ 231 阅读

相关前端性能监控

1.什么是前端对于网站来说，通常是指网站的前台部分，也就是Web应用中用户可以看得见碰得着的东西。 2.为什么要做前端性能监控根据《高性能网站建设指南》上的

约定不等于承诺〃/ 2022年06月06日 05:36/ 0 赞/ 667 阅读

相关 Performance — 前端性能监控利器

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 最近在写一个监控脚本，终于有机会接触到了这一块，整理后写

青旅半醒/ 2022年01月16日 05:39/ 0 赞/ 319 阅读

相关前端性能——监控起步

前端性能 1.关键点　　分页面、区域、浏览器、性能指标　　页面的性能指标详解：　　白屏时间（first Paint Time）——用户从打开页面开始到页面

女爷i/ 2021年09月19日 13:38/ 0 赞/ 545 阅读

相关 Performance — 前端性能监控利器

[https://www.cnblogs.com/bldxh/p/6857324.html][https_www.cnblogs.com_bldxh_p_6857324.htm

绝地灬酷狼/ 2021年06月11日 15:10/ 0 赞/ 598 阅读