本文介绍如何建立前端代码性能监控系统，以解决发布后无法掌握用户端执行状态的问题。方案涵盖三大模块：通过window.onerror收集脚本执行错误；利用Performance API监测页面生命周期各阶段耗时；在JS和CSS加载前后打时间戳统计资源加载时长。通过后台CGI接口汇总数据，帮助开发者定位问题并优化页面白屏及可操作等待时间。
前端监控系统的必要性
本文介绍如何利用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 API涵盖了从页面加载到执行完成整个生命周期中各个步骤的执行时间。关于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>
以上即为本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持。