前端代碼性能質量監測

1.頁面總體性能

經過瀏覽器提供的 window.performance.timing 方法，咱們可以獲得網頁每一個處理階段的精確時間。打開一個頁面後，這些信息會被瀏覽器記錄下來，咱們直接在控制檯輸出，就能夠查看結果

PerformanceTiming 接口包含了當前頁面中與時間相關的信息。

能夠經過只讀屬性Performance.timing 得到實現該接口的一個對象。

var timing = window.Performance.timing;
console.log(timing);

詳情以下：

https://developer.mozilla.org...

PerformanceTiming 接口不包含任何繼承屬性。

• PerformanceTiming.navigationStart 只讀

是一個無符號long long 型的毫秒數，表徵了從同一個瀏覽器上下文的上一個文檔卸載(unload)結束時的UNIX時間戳。若是沒有上一個文檔，這個值會和PerformanceTiming.fetchStart相同。

• PerformanceTiming.unloadEventStart 只讀

是一個無符號long long 型的毫秒數，表徵了unload事件拋出時的UNIX時間戳。若是沒有上一個文檔，or if the previous document, or one of the needed redirects, is not of the same origin, 這個值會返回0.

• PerformanceTiming.unloadEventEnd 只讀

是一個無符號long long 型的毫秒數，表徵了unload事件處理完成時的UNIX時間戳。若是沒有上一個文檔，or if the previous document, or one of the needed redirects, is not of the same origin, 這個值會返回0.

• PerformanceTiming.redirectStart 只讀

是一個無符號long long 型的毫秒數，表徵了第一個HTTP重定向開始時的UNIX時間戳。若是沒有重定向，或者重定向中的一個不一樣源，這個值會返回0.

• PerformanceTiming.redirectEnd 只讀

是一個無符號long long 型的毫秒數，表徵了最後一個HTTP重定向完成時（也就是說是HTTP響應的最後一個比特直接被收到的時間）的UNIX時間戳。若是沒有重定向，或者重定向中的一個不一樣源，這個值會返回0.

• PerformanceTiming.fetchStart 只讀

是一個無符號long long 型的毫秒數，表徵了瀏覽器準備好使用HTTP請求來獲取(fetch)文檔的UNIX時間戳。這個時間點會在檢查任何應用緩存以前。

• PerformanceTiming.domainLookupStart 只讀

是一個無符號long long 型的毫秒數，表徵了域名查詢開始的UNIX時間戳。若是使用了持續鏈接(persistent connection)，或者這個信息存儲到了緩存或者本地資源上，這個值將和 PerformanceTiming.fetchStart一致。

• PerformanceTiming.domainLookupEnd 只讀

是一個無符號long long 型的毫秒數，表徵了域名查詢結束的UNIX時間戳。若是使用了持續鏈接(persistent connection)，或者這個信息存儲到了緩存或者本地資源上，這個值將和 PerformanceTiming.fetchStart一致。

• PerformanceTiming.connectStart 只讀

是一個無符號long long 型的毫秒數，返回HTTP請求開始向服務器發送時的Unix毫秒時間戳。若是使用持久鏈接（persistent connection），則返回值等同於fetchStart屬性的值。

• PerformanceTiming.connectEnd 只讀

是一個無符號long long 型的毫秒數，返回瀏覽器與服務器之間的鏈接創建時的Unix毫秒時間戳。若是創建的是持久鏈接，則返回值等同於fetchStart屬性的值。鏈接創建指的是全部握手和認證過程所有結束。

• PerformanceTiming.secureConnectionStart 只讀

是一個無符號long long 型的毫秒數，返回瀏覽器與服務器開始安全連接的握手時的Unix毫秒時間戳。若是當前網頁不要求安全鏈接，則返回0。

• PerformanceTiming.requestStart 只讀

是一個無符號long long 型的毫秒數，返回瀏覽器向服務器發出HTTP請求時（或開始讀取本地緩存時）的Unix毫秒時間戳。

• PerformanceTiming.responseStart 只讀

是一個無符號long long 型的毫秒數，返回瀏覽器從服務器收到（或從本地緩存讀取）第一個字節時的Unix毫秒時間戳。若是傳輸層在開始請求以後失敗而且鏈接被重開，該屬性將會被數製成新的請求的相對應的發起時間。

• PerformanceTiming.responseEnd 只讀

是一個無符號long long 型的毫秒數，返回瀏覽器從服務器收到（或從本地緩存讀取，或從本地資源讀取）最後一個字節時（若是在此以前HTTP鏈接已經關閉，則返回關閉時）的Unix毫秒時間戳。

• PerformanceTiming.domLoading 只讀

是一個無符號long long 型的毫秒數，返回當前網頁DOM結構開始解析時（即Document.readyState屬性變爲「loading」、相應的 readystatechange事件觸發時）的Unix毫秒時間戳。

• PerformanceTiming.domInteractive 只讀

是一個無符號long long 型的毫秒數，返回當前網頁DOM結構結束解析、開始加載內嵌資源時（即Document.readyState屬性變爲「interactive」、相應的readystatechange事件觸發時）的Unix毫秒時間戳。

• PerformanceTiming.domContentLoadedEventStart 只讀

是一個無符號long long 型的毫秒數，返回當解析器發送DOMContentLoaded 事件，即全部須要被執行的腳本已經被解析時的Unix毫秒時間戳。

• PerformanceTiming.domContentLoadedEventEnd 只讀

是一個無符號long long 型的毫秒數，返回當全部須要當即執行的腳本已經被執行（不論執行順序）時的Unix毫秒時間戳。

• PerformanceTiming.domComplete 只讀

是一個無符號long long 型的毫秒數，返回當前文檔解析完成，即Document.readyState 變爲 'complete'且相對應的readystatechange 被觸發時的Unix毫秒時間戳。

• PerformanceTiming.loadEventStart 只讀

是一個無符號long long 型的毫秒數，返回該文檔下，load事件被髮送時的Unix毫秒時間戳。若是這個事件還未被髮送，它的值將會是0。

• PerformanceTiming.loadEventEnd 只讀

是一個無符號long long 型的毫秒數，返回當load事件結束，即加載事件完成時的Unix毫秒時間戳。若是這個事件還未被髮送，或者還沒有完成，它的值將會是0.

performance支持狀況

http://caniuse.com/#search=pe...

2.window.onerror

使用 window.onerror

https://developer.mozilla.org...

函數參數：

message：錯誤信息（字符串）。Available as event (sic!) in HTML onerror="" handler.

source：發生錯誤的腳本URL（字符串）

lineno：發生錯誤的行號（數字）

colno：發生錯誤的列號（數字）

error：Error對象（對象）

若該函數返回true，則阻止執行默認事件處理函數。

經過在 window.onerror 上定義一個事件監聽函數，程序中代碼產生的錯誤就會被 window.onerror 上面註冊的監聽函數捕獲到，一般咱們會這樣實現一個 onerror 的函數

window.onerror = function(msg, url, line, col, error){
        var errInfo = {};

        errInfo.msg = msg;// 錯誤信息
        errInfo.url = url;//錯誤文件路徑
        errInfo.line = line;//行號，壓縮事後，然並卵
        errInfo.col = col;//列號

        if (error && error.stack) {
          errInfo.stack = error.stack;
        }
        // 把錯誤信息發送到後臺服務器 
           sendLog(errorInfo);
        return true;
    };
function sendLog(log){
    var img = new Image();
    img.src="url?errorInfo="+encodeURIComponent(JSON.stringify(log));
}

3.Script error的解決辦法

當加載自不一樣域的腳本中發生語法(?)錯誤時，爲避免信息泄露（參見bug 363897），語法錯誤的細節將不會報告，而代之簡單的"Script error."。在某些瀏覽器中，經過在<script>使用crossorigin屬性並要求服務器發送適當的CORS HTTP響應頭，該行爲可被覆蓋。

ex：

html的url爲www.taobao.com; js路徑爲https://g.alicdn.com/xxx.js
遇到這樣的報錯。這是瀏覽器出於安全性的考慮，在加載非同源的JS文件時會隱藏部分信息，包括咱們此處想要取得的錯誤信息，並給出一個統一的 Script error 提示，想要解決這個問題，咱們須要瀏覽器端和服務端都作相應的調整

服務器端：

header('Access-Control-Allow-Origin: *');

也能夠直接更改nginx的配置容許跨域引用

客戶端：

<script src = 'https://blog.sentry.io/js/script.js' crossorigin></script>

服務端必須加容許跨域引用，不然這段js不會執行。。。
更多信息請移步本人博客 https://www.56way.com/p/106.html