本篇文章介紹了Javascript監(jiān)控前端相關(guān)數(shù)據(jù)，項(xiàng)目開發(fā)完成外發(fā)后，沒有一個(gè)監(jiān)控系統(tǒng)，我們很難了解到發(fā)布出去的代碼在用戶機(jī)器上執(zhí)行是否正確，所以需要建立前端代碼性能相關(guān)的監(jiān)控系統(tǒng)。

所以我們需要做以下的一些模塊：

一、收集腳本執(zhí)行錯(cuò)誤

function error(msg,url,line){
  var REPORT_URL = "xxxx/cgi"; // 收集上報(bào)數(shù)據(jù)的信息
  var m =[msg, url, line, navigator.userAgent, +new Date];// 收集錯(cuò)誤信息，發(fā)生錯(cuò)誤的腳本文件網(wǎng)絡(luò)地址，用戶代理信息，時(shí)間
  var url = REPORT_URL + m.join('||');// 組裝錯(cuò)誤上報(bào)信息內(nèi)容URL
  var img = new Image;
  img.onload = img.onerror = function(){
   img = null;
  };
  img.src = url;// 發(fā)送數(shù)據(jù)到后臺(tái)cgi
}
// 監(jiān)聽錯(cuò)誤上報(bào)
window.onerror = function(msg,url,line){
  error(msg,url,line);
}

通過管理后臺(tái)系統(tǒng)，我們可以看到頁面上每次錯(cuò)誤的信息，通過這些信息我們可以很快定位并且解決問題。

二、收集html5 performance信息

performance 包含頁面加載到執(zhí)行完成的整個(gè)生命周期中不同執(zhí)行步驟的執(zhí)行時(shí)間。performance相關(guān)文章點(diǎn)擊如下：使用performance API 監(jiān)測頁面性能

計(jì)算不同步驟時(shí)間相對(duì)于navigationStart的時(shí)間差，可以通過相應(yīng)后臺(tái)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ái)接口收集和統(tǒng)計(jì)，我們可以對(duì)頁面執(zhí)行性能有很詳細(xì)的了解。

三、統(tǒng)計(jì)每個(gè)頁面的JS和CSS加載時(shí)間

在JS或者CSS加載之前打上時(shí)間戳，加載之后打上時(shí)間戳，并且將數(shù)據(jù)上報(bào)到后臺(tái)。加載時(shí)間反映了頁面白屏，可操作的等待時(shí)間。

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

您可能感興趣的文章: