澳门太阳娱乐集团官网-太阳集团太阳娱乐登录

前边二个相关数据监察和控制
分类:网页制作

前面一个相关数据监控

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_U瑞虎L + m.join('||');// 组装错误上报音信内容U奥迪Q5L 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 包括页面加载到实施到位的100%生命周期中差异实行步骤的奉行时间。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>

连串支付完毕外发后,不多个监督种类,我们很难了然到公布出来的代码在客商机器上实践是不是科学,所以必要建设构造前端代码性能相关的监察系统。

本篇文章介绍了Javascript监察和控制前端相关数据,项目耗费产生外发后,没有三个监督检查系列,大家很难理解到公布出来的代码在顾客机器上执行是或不是科学,所以需求营造前端代码质量相关的督查种类。

参谋资料:

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

通过管制后台系统,大家得以观察页面上每一次错误的音信,通过那个音信大家得以飞快定位同期解决难题。

 

一、搜罗脚本实行错误

二、收集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;
}

经过后台接口收罗和计算,大家能够对页面试行质量有很详细的询问。

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

三、总括每种页面包车型客车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>

由此管理后台系统,大家可以观看页面上每一趟错误的音讯,通过这个消息我们能够连忙定位同一时间化解难题。

仿照效法资料:

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

 

转载自AlloyTeam:

 二、收集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;
}

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

三、总结每种页面包车型大巴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>

上述正是本文的全部内容,希望对大家的上学抱有助于,也可望大家多多支

您大概感兴趣的篇章:

  • 应用javascript达成监督录制播放并打字与印刷日志
  • js监察和控制IE火狐浏览器关闭、刷新、回落、前进事件
  • 督察客户是或不是关闭浏览器的js代码

本文由澳门太阳娱乐集团官网发布于网页制作,转载请注明出处:前边二个相关数据监察和控制

上一篇:【澳门太阳娱乐集团官网】Chrome开荒者工具不完 下一篇:IE Firefox 使用自定义标签的区别
猜你喜欢
热门排行
精彩图文