前者相关数据监察和控制

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

原作出处：
AlloyTeam

品类开支形成外发后，没有四个监督系统，我们很难精晓到揭橥出来的代码在用户机器上推行是不是科学，所以须要建立前端代码质量相关的监察和控制种类。

由此大家需求做以下的局地模块：

壹、收集脚本执行错误

JavaScript

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;

}

由此后台接口收集和总计，大家能够对页面执行质量有很详细的精通。

三、总结各样页面包车型客车JS和CSS加载时间

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

XHTML

<sript>

var cssLoadTime = (+new Date) – cssLoadStart;

var jsLoadStart = +new Date;

</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

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

壹、收集脚本执行错误

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收集。

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

通过后台接口收集和计算，我们得以对页面执行性能有很详细的问询。

参考资料：

转载自AlloyTeam：http://www.alloyteam.com/2014/03/front-end-data-monitoring/

花色费用形成外发后，没有1个监察系统，大家很难精通到公布出去的代码在用户机器上执行是否正确，所以须要树立前端代码品质相关的监督检查系统。

因而大家须要做以下的片段模块：

三、计算各样页面包车型客车JS和CSS加载时间

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

<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>

manbetx2.0手机版

利用Javascript监察和控制前端相关数据

前者相关数据监察和控制

壹、收集脚本执行错误

参考资料：

二、收集html5 performance信息

参考资料：

三、计算各样页面包车型客车JS和CSS加载时间

相关文章

发表评论取消回复

利用Javascript监察和控制前端相关数据

前者相关数据监察和控制

壹 、收集脚本执行错误

参考资料：

二、收集html5 performance信息

参考资料：

三 、计算各样页面包车型客车JS和CSS加载时间

相关文章

发表评论 取消回复

壹、收集脚本执行错误

三、计算各样页面包车型客车JS和CSS加载时间

发表评论取消回复