前端性能监控

柔情只为你懂 2022-12-29 14:13 206阅读 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/66929f05674649acb4b5d1a7e5778ce6.png
[b9becd44308a004264bcb67f25899401.png]: /images/20221120/df9979d32654458e8fbda2dac4289baa.png

发表评论取消回复

表情：

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

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

相关阅读

相关前端性能监控

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

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

相关前端性能监控

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

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

相关如何系统地进行前端性能优化【监控篇】

> 性能优化是前端领域一个亘古不变的热点话题。本系列文章将分监控、加载性能优化和运行时性能优化三章从实践角度来做具体分享想要优化就必须得有度量。有了监控才能客观、系统地进行

朱雀/ 2022年12月25日 15:56/ 0 赞/ 117 阅读

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

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

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

相关前端性能监控

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

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

相关前端监控

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

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

相关前端性能监控

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

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

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

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

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

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

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

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

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

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

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