使用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的一句话搞定手风琴菜单
Sep 14 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
探讨javascript是不是面向对象的语言
Nov 21 Javascript
js实现日期级联效果
Jan 23 Javascript
在JavaScript中判断整型的N种方法示例介绍
Jun 18 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
详解Vue之计算属性
Jun 20 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
js的匿名函数使用介绍
2013/12/11 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
javascript实现平滑无缝滚动
2020/08/09 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
js判断文件格式及大小的简单实例(必看)
2016/10/11 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
JS实现导航栏楼层特效
2020/01/01 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
Python中用memcached来减少数据库查询次数的教程
2015/04/07 Python
python构建深度神经网络(续)
2018/03/10 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python 爬取疫情数据的源码
2020/02/09 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Pygame框架实现飞机大战
2020/08/07 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
Java文件和目录(IO)操作
2014/08/26 面试题
环保专项行动方案
2014/05/12 职场文书
青年文明号申报材料
2014/12/23 职场文书
玄武湖导游词
2015/02/05 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
2015年扶贫帮困工作总结
2015/05/20 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
万能密码的SQL注入漏洞其PHP环境搭建及防御手段
2021/09/04 SQL Server