本篇文章介紹了Javascript監(jiān)控前端相關(guān)數(shù)據(jù)，項目開發(fā)完成外發(fā)后，沒有一個監(jiān)控系統(tǒng)，我們很難了解到發(fā)布出去的代碼在用戶機(jī)器上執(zhí)行是否正確，所以需要建立前端代碼性能相關(guān)的監(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)絡(luò)地址，用戶代理信息，時間
  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相關(guān)文章點擊如下：使用performance API 監(jiān)測頁面性能

計算不同步驟時間相對于navigationStart的時間差，可以通過相應(yīng)后臺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í)行性能有很詳細(xì)的了解。

三、統(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支

您可能感興趣的文章: