当前位置:王中王鉄算盘开奖结果 > 品牌动态 > 前边三个相关数据监察和控制

前边三个相关数据监察和控制

文章作者:品牌动态 上传时间:2019-11-03

前者相关数据监控

2015/08/16 · HTML5 · 数据监察和控制

初藳出处: AlloyTeam   

体系支付成功外发后,没多少个监察种类,大家很难领悟到发表出来的代码在客户机器上施行是还是不是科学,所以须求创设前端代码品质相关的监察和控制体系。

就此大家要求做以下的风流倜傥部分模块:

生龙活虎、收罗脚本施行错误

JavaScript

function error(msg,url,line){ var REPORT_UEvoqueL = "xxxx/cgi"; // 搜罗报告数据的音讯 var m =[msg, url, line, navigator.userAgent, +new Date];// 摘取错误音讯,产生错误的脚本文件网络地址,顾客代理新闻,时间 var url = REPORT_U传祺L + m.join('||');// 组装错误报告音信内容U福特ExplorerL var img = new Image; img.onload = img.onerror = function(){ img = null; }; img.src = url;// 发送数据到后台cgi } // 监听错误反馈 window.onerror = function(msg,url,line){ error(msg,url,line); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function error(msg,url,line){
   var REPORT_URL = "xxxx/cgi"; // 收集上报数据的信息
   var m =[msg, url, line, navigator.userAgent, +new Date];// 收集错误信息,发生错误的脚本文件网络地址,用户代理信息,时间
   var url = REPORT_URL + m.join('||');// 组装错误上报信息内容URL
   var img = new Image;
   img.onload = img.onerror = function(){
      img = null;
   };
   img.src = url;// 发送数据到后台cgi
}
// 监听错误上报
window.onerror = function(msg,url,line){
   error(msg,url,line);
}

因此关押后台系统,大家能够观察页面上每趟错误的消息,通过这几个新闻大家能够飞速定位同期消除难题。

二、收集html5 performance信息

performance 包涵页面加载到试行到位的成套生命周期中不一致实行步骤的举办时间。performance相关文章点击如下:动用performance API 监测页面品质

计量不一致步骤时间相对于navigationStart的光阴差,能够透过相应后台CGI搜罗。

JavaScript

function _performance(){ var REPORT_URL = "xxxx/cgi?perf="; var perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ), points = ['navigationStart','unloadEventStart','unloadEventEnd','redirectStart','redirectEnd','fetchStart','domainLookupStart','connectStart','requestStart','responseStart','responseEnd','domLoading','domInteractive','domContentLoadedEventEnd','domComplete','loadEventStart','loadEventEnd']; var timing = pref.timing; perf = perf ? perf : window.performance; if( perf && timing ) { var arr = []; var navigationStart = timing[points[0]]; for(var i=0,l=points.length;i<l;i++){ arr[i] = timing[points[i]] - navigationStart; } var url = REPORT_URL + arr.join("-"); var img = new Image; img.onload = img.onerror = function(){ img=null; } img.src = url; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function _performance(){
   var REPORT_URL = "xxxx/cgi?perf=";
   var perf = (window.webkitPerformance ? window.webkitPerformance : window.msPerformance ),
      points = ['navigationStart','unloadEventStart','unloadEventEnd','redirectStart','redirectEnd','fetchStart','domainLookupStart','connectStart','requestStart','responseStart','responseEnd','domLoading','domInteractive','domContentLoadedEventEnd','domComplete','loadEventStart','loadEventEnd'];
   var timing = pref.timing;
   perf = perf  ? perf : window.performance;
   if( perf  && timing ) {
      var arr = [];
      var navigationStart = timing[points[0]];
      for(var i=0,l=points.length;i<l;i++){
         arr[i] = timing[points[i]] - navigationStart;
      }
   var url = REPORT_URL + arr.join("-");
   var img = new Image;
   img.onload = img.onerror = function(){
      img=null;
   }
   img.src = url;
}

透过后台接口搜聚和总结,大家能够对页面实践品质有很详细的问询。

三、总结各个页面包车型大巴JS和CSS加载时间

在JS也许CSS加载以前打上时间戳,加载之后打上时间戳,并且将数据反馈到后台。加载时间反映了页面白屏,可操作的等候时间。

XHTML

<script>var cssLoadStart = +new Date</script> <link rel="stylesheet" href="xxx.css" type="text/css" media="all"> <link rel="stylesheet" href="xxx1.css" type="text/css" media="all"> <link rel="stylesheet" href="xxx2.css" type="text/css" media="all"> <sript> var cssLoadTime = (+new Date) - cssLoadStart; var jsLoadStart = +new Date; </script> <script type="text/javascript" src="xx1.js"></script> <script type="text/javascript" src="xx2.js"></script> <script type="text/javascript" src="xx3.js"></script> <script> var jsLoadTime = (+new Date) - jsLoadStart; var REPORT_URL = 'xxx/cgi?data=' var img = new Image; img.onload = img.onerror = function(){ img = null; }; img.src = REPORT_URL + cssLoadTime + '-' + jsLoadTime; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>var cssLoadStart = +new Date</script>
<link rel="stylesheet" href="xxx.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx1.css" type="text/css" media="all">
<link rel="stylesheet" href="xxx2.css" type="text/css" media="all">
<sript>
   var cssLoadTime = (+new Date) - cssLoadStart;
   var jsLoadStart = +new Date;
</script>
<script type="text/javascript" src="xx1.js"></script>
<script type="text/javascript" src="xx2.js"></script>
<script type="text/javascript" src="xx3.js"></script>
<script>
   var jsLoadTime = (+new Date) - jsLoadStart;
   var REPORT_URL = 'xxx/cgi?data='
   var img = new Image;
   img.onload = img.onerror = function(){
      img = null;
   };
   img.src = REPORT_URL + cssLoadTime + '-' + jsLoadTime;
</script>

XHTML

<a href="" target="_blank"> </a>

1
<a href="https://github.com/perltzhu/js-data-report" target="_blank"> </a>

参谋资料:

  • html5 performance en
  • html5 performance cn
  • javascript onerror api

    1 赞 1 收藏 评论

图片 1

本文由王中王鉄算盘开奖结果发布于品牌动态,转载请注明出处:前边三个相关数据监察和控制

关键词: