使用Javascript监控前端相关数据的代码_javascript技巧_脚本之家

本篇小说介绍了Javascript监察和控制前端相关数据,项目开销达成外发后,未有叁个监督检查系统,我们很难了然到发布出去的代码在客商机器上实行是或不是正确,所以要求树立前端代码品质相关的监察系统。

于是咱们须求做以下的某个模块:

生机勃勃、采摘脚本推行错误

function error{ 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{ error;}

因而管理后台系统,大家能够看看页面上每趟错误的新闻,通过那么些音信大家可以神速定位相同的时间解决难点。

二、收集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 { var arr = []; var navigationStart = timing[points[0]]; for(var i=0,l=points.length;i通过后台接口收集和统计,我们可以对页面执行性能有很详细的了解。三、统计每个页面的JS和CSS加载时间在JS或者CSS加载之前打上时间戳,加载之后打上时间戳,并且将数据上报到后台。加载时间反映了页面白屏,可操作的等待时间。var cssLoadStart = +new Date var cssLoadTime =  - cssLoadStart; var jsLoadStart = +new Date; var jsLoadTime =  - jsLoadStart; var REPORT_URL = 'xxx/cgi?data=' var img = new Image; img.onload = img.onerror = function(){ img = null; }; img.src = REPORT_URL + cssLoadTime + '-' + jsLoadTime;

以上正是本文的全体内容,希望对大家的就学抱有利于,也冀望大家多多支

本文由澳门威斯尼人平台登录发布于服务器&运维,转载请注明出处:使用Javascript监控前端相关数据的代码_javascript技巧_脚本之家

相关阅读