使用Javascript监控前端相关数据的代码


Posted in Javascript onOctober 27, 2016

本篇文章介绍了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收集。

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 相关文章推荐
javascript之通用简单的table选项卡实现(二)
May 09 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
jQuery插件ContextMenu自定义图标
Mar 15 Javascript
Bootstrap页面标题Page Header的实现方法
Mar 22 Javascript
微信小程序实战之上拉(分页加载)效果(2)
Apr 17 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 #Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 #Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 #Javascript
vue插件tab选项卡使用小结
Oct 27 #Javascript
JS实现用户注册时获取短信验证码和倒计时功能
Oct 27 #Javascript
微信小程序 action-sheet底部菜单详解
Oct 27 #Javascript
JS短信验证码倒计时功能的实现(没有验证码,只有倒计时)
Oct 27 #Javascript
You might like
php 破解防盗链图片函数
2008/12/09 PHP
php $_SERVER当前完整url的写法
2009/11/12 PHP
解析php二分法查找数组是否包含某一元素
2013/05/23 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
firefox 和 ie 事件处理的细节,研究,再研究 书写同时兼容ie和ff的事件处理代码
2007/04/12 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
理解Javascript_12_执行模型浅析
2010/10/18 Javascript
jquery radio 操作代码
2011/03/16 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
2015/04/16 Javascript
vueJS简单的点击显示与隐藏的效果【实现代码】
2016/05/03 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
浅谈js的url解析函数封装
2016/06/28 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
2017/07/11 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
使用cx_freeze把python打包exe示例
2014/01/24 Python
在Python中操作列表之List.append()方法的使用
2015/05/20 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
对python中的argv和argc使用详解
2018/12/15 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
django中上传图片分页三级联动效果的实现代码
2019/08/30 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
Python基于os.environ从windows获取环境变量
2020/06/09 Python
Python ConfigParser模块的使用示例
2020/10/12 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
荣耀商城:HIHONOR
2020/11/03 全球购物
《锄禾》教学反思
2014/04/08 职场文书
借款协议书范本
2014/04/22 职场文书
Python正则表达式中flags参数的实例详解
2022/04/01 Python