使用Javascript监控前端相关数据的代码
作者:chenpingzhao 发布时间:2024-04-17 09:43:02
标签:前端,监控,js
本篇文章介绍了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>
0
投稿
猜你喜欢
- 1、先看看什么是 iterable 对象以内置的max函数为例子,查看其doc:>>> print max.__doc__
- 什么是死锁,在Go的协程里面死锁通常就是永久阻塞了,你拿着我的东西,要我先给你然后再给我,我拿着你的东西又让你先给我,不然就不给你。我俩都这
- Bootstrap提供了四种用于<img>类的样式,分别是:.img-rounded:圆角 (IE8 不支持),添加 borde
- Python2.x使用过程中,中文乱码解决最耳熟能详的方法就是在代码前加上#-*- coding:utf-8 –*-那么为什么需要这么做呢?
- 相比于range,list等简易单词,enumerate仅凭外形都不太让人愿意用。事实上,enumerate还是很好用的。enumerate
- 学习网络爬虫难免遇到使用代理的情况,下面介绍一下如何使用requests设置代理:如果需要使用代理,你可以通过为任意请求方法提供 proxi
- 可能是我“火星”了,不过在 空虚 的 Blog 中学到的一招。这个技巧的原理是利用 iframe 载入本机各盘符的根目录,然后判断 ifra
- asp自定义错误显示方法:<html><head><meta http-equiv="Co
- 如果值没有重复的情况,可以先用array_flip()来交换键和值,然后krsort(),最后再array_flip()交换回来,就可以比较
- 1 Git简介Git 是目前世界上最先进的分布式版本控制系统(没有之一)作用: 源代码管理为什么要进行源代码管理?
- 1.java连接Oracle数据库使用以下代码三个步骤:下载ojdbc.jar包并导入项目中。将下面的代码放在你觉得它应该在的地方。修改代码
- 流动网页设计有很多好处,但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、PDA小屏幕上都能得到良好的呈现。但是,糟糕的代码结
- 前言ctypes是Python的外部函数库。它提供了C兼容的数据类型,并且允许调用动态链接库/共享库中的函数。它可以将这些库包装起来给Pyt
- 1、安装pip install mediapipe2、代码实现# -*- coding: utf-8 -*-""&quo
- 基于以下三个原因,我们选择Python作为实现机器学习算法的编程语言:(1) Python的语法清晰;(2) 易于操作纯文本文件;(3) 使
- 本文实例讲述了Python实现按照指定要求逆序输出一个数字的方法。分享给大家供大家参考,具体如下:问题是:输入一个数字,按照指定要求逆序输出
- 前言最近遇到一个统计查询需求,要求一次性查询多个统计信息,其中两个查询信息不在一个表中,也没有业务关联,表中也没有做连接处理。不考虑产品设计
- 所用拓展模块 xlrd: Python语言中,读取Excel的扩展工
- create 语句后面的TYPE=MyISAMTYPE=MyISAM 和 ENGINE=MyISAM 都是设置数据库存储引擎的语句 ,(老版
- Git是什么?svn是什么?Git svn 统称版本控制器在开发中经常是两个或多个人同时开发一个控制器为了不产生代码冲突法发明了版本控制器最