当前位置: 美高梅棋牌 > 软件资讯 > 正文

美高梅游戏官网平台前者相关数据监察和控制

时间:2019-10-08 06:54来源:软件资讯
前端相关数据监察和控制 2015/08/16 · HTML5 ·多少监察和控制 初稿出处:AlloyTeam    项目开支达成外发后,没多少个督察种类,大家很难驾驭到宣布出去的代码在客商机器上进行是或不是

前端相关数据监察和控制

2015/08/16 · HTML5 · 多少监察和控制

初稿出处: AlloyTeam   

项目开支达成外发后,没多少个督察种类,大家很难驾驭到宣布出去的代码在客商机器上进行是或不是科学,所以须求建设构造前端代码质量相关的监控种类。

从而大家须要做以下的一对模块:

一、搜聚脚本实施错误

JavaScript

function error(msg,url,line){ var REPORT_U揽胜L = "xxxx/cgi"; // 搜罗报告数据的音信 var m =[msg, url, line, navigator.userAgent, +new Date];// 搜集错误音信,发生错误的本子文件互联网地址,客户代理音讯,时间 var url = REPORT_U逍客L + m.join('||');// 组装错误报告音讯内容UPAJEROL 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

因此大家必要做以下的局地模块:

一、搜集脚本实行错误

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);
}

经过管制后台系统,我们能够看出页面上每一遍错误的新闻,通过那么些新闻我们得以飞速定位同时化解难题。

 

编辑:软件资讯 本文来源:美高梅游戏官网平台前者相关数据监察和控制

关键词: