使用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 相关文章推荐
jquery中get和post的简单实例
Feb 04 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
Nov 06 Javascript
简单实现JavaScript图片切换效果
Nov 28 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
vue-next/runtime-core 源码阅读指南详解
Oct 25 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
Vue父子之间值传递的实例教程
Jul 02 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
PHP面向对象概念
2011/11/06 PHP
PHP图片上传代码
2013/11/04 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php生成随机数的三种方法
2014/09/10 PHP
如何让CI框架支持service层
2014/10/29 PHP
Laravel如何创建服务器提供者实例代码
2019/04/15 PHP
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
深入浅析AngularJS和DataModel
2016/02/16 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
2018/01/23 Javascript
AngularJS ui-router刷新子页面路由的方法
2018/07/23 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python读取与写入csv格式文件的示例代码
2017/12/16 Python
Python 实现域名解析为ip的方法
2019/02/14 Python
python覆盖写入,追加写入的实例
2019/06/26 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
记者岗位职责
2014/01/06 职场文书
大学军训感言
2014/01/10 职场文书
医院总经理岗位职责
2014/02/04 职场文书
高中生职业生涯规划书
2014/02/24 职场文书
《乞巧》教学反思
2014/02/27 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
开场白怎么写
2015/06/01 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android