DIV CSS 佈局教程網

本篇文章介紹了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 包含頁面加載到執行完成的整個生命周期中不同執行步驟的執行時間。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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支