使用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错误的解决方案
Aug 07 Javascript
js 中{},[]中括号,大括号使用详解
May 12 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
过滤器vue.filters的使用方法实现
Sep 18 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
JavaScript代码实现简单计算器
Dec 27 Javascript
vue使用echarts实现折线图
Mar 21 Vue.js
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支持多种格式图片上传(支持jpg、png、gif)
2011/11/03 PHP
php读取mysql乱码,用set names XXX解决的原理分享
2011/12/29 PHP
php使用qr生成二维码的示例分享
2014/01/20 PHP
PHP内存缓存Memcached类实例
2014/12/08 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
JQuery datepicker 使用方法
2011/05/20 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
js中json对象和字符串的理解及相互转化操作实现方法
2017/09/22 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
微信小程序-可移动菜单的实现过程详解
2019/06/24 Javascript
用smtplib和email封装python发送邮件模块类分享
2014/02/17 Python
Python中对列表排序实例
2015/01/04 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
浅谈TensorFlow中读取图像数据的三种方式
2020/06/30 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
现代家居用品及礼品:LBC Modern
2018/06/24 全球购物
师范应届生语文教师求职信
2013/10/29 职场文书
自我鉴定怎么写
2013/12/05 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
物理研修随笔感言
2014/02/14 职场文书
家长通知书家长评语
2014/04/17 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
黑白记忆观后感
2015/06/18 职场文书
JavaScript 中for/of,for/in 的详细介绍
2021/11/17 Javascript
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS