本篇文章介紹了Javascript監(jiān)控前端相關數(shù)據(jù)，項目開發(fā)完成外發(fā)后，沒有一個監(jiān)控系統(tǒng)，我們很難了解到發(fā)布出去的代碼在用戶機器上執(zhí)行是否正確，所以需要建立前端代碼性能相關的監(jiān)控系統(tǒng)。
所以我們需要做以下的一些模塊：
一、收集腳本執(zhí)行錯誤
function error(msg,url,line){ var REPORT_URL = "xxxx/cgi"; // 收集上報數(shù)據(jù)的信息 var m =[msg, url, line, navigator.userAgent, +new Date];// 收集錯誤信息，發(fā)生錯誤的腳本文件網(wǎng)絡地址，用戶代理信息，時間 var url = REPORT_URL + m.join('||');// 組裝錯誤上報信息內(nèi)容URL var img = new Image; img.onload = img.onerror = function(){ img = null; }; img.src = url;// 發(fā)送數(shù)據(jù)到后臺cgi}// 監(jiān)聽錯誤上報window.onerror = function(msg,url,line){ error(msg,url,line);}通過管理后臺系統(tǒng)，我們可以看到頁面上每次錯誤的信息，通過這些信息我們可以很快定位并且解決問題。
二、收集html5 performance信息
performance 包含頁面加載到執(zhí)行完成的整個生命周期中不同執(zhí)行步驟的執(zhí)行時間。performance相關文章點擊如下：使用performance API 監(jiān)測頁面性能
計算不同步驟時間相對于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;}通過后臺接口收集和統(tǒng)計，我們可以對頁面執(zhí)行性能有很詳細的了解。
三、統(tǒng)計每個頁面的JS和CSS加載時間
在JS或者CSS加載之前打上時間戳，加載之后打上時間戳，并且將數(shù)據(jù)上報到后臺。加載時間反映了頁面白屏，可操作的等待時間。
<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>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支
新聞熱點
疑難解答
