Web 前端效能分析（二）
摘要：
簡要說明
在上一篇文章《Web 前端效能分析（一）》
中，我們對前端效能相關的知識進行了學習和探討，並且做了一個試驗性質的專案用來實踐和驗證，本文附上主要功能模組 -web-performance.js
的原始碼，作為對web前端效能分析的學習記錄。
Perfor...
簡要說明
在上一篇文章《Web 前端效能分析（一）》
中，我們對前端效能相關的知識進行了學習和探討，並且做了一個試驗性質的專案用來實踐和驗證，本文附上主要功能模組 -web-performance.js
的原始碼，作為對web前端效能分析的學習記錄。
Performance API
能夠實現對網頁效能的監控，主要是依靠 Performance API。
模組原始碼
web-performance.js
/**
* ------------------------------------------------------------------
* 網頁效能監控
* ------------------------------------------------------------------
*/
(function (win) {
// 相容的陣列判斷方法
if (!Array.isArray) {
Array.isArray = function (arg) {
return Object.prototype.toString.call(arg) === '[object Array]';
};
}
// 模組定義
function factory() {
var performance = win.performance;
if (!performance) {
// 當前瀏覽器不支援
console.log("Browser does not support Web Performance");
return;
}
var wp = {};
wp.pagePerformanceInfo = null; // 記錄頁面初始化效能資訊
wp.xhrInfoArr = []; // 記錄頁面初始化完成前的 ajax 資訊
/**
* performance 基本方法 & 定義主要資訊欄位
* ------------------------------------------------------------------
*/
// 計算首頁載入相關時間
wp.getPerformanceTiming = function () {
var t = performance.timing;
var times = {};
//【重要】頁面載入完成的時間, 這幾乎代表了使用者等待頁面可用的時間
times.pageLoad = t.loadEventEnd - t.navigationStart;
//【重要】DNS 查詢時間
// times.dns = t.domainLookupEnd - t.domainLookupStart;
//【重要】讀取頁面第一個位元組的時間(白屏時間), 這可以理解為使用者拿到你的資源佔用的時間
// TTFB 即 Time To First Byte 的意思
times.ttfb = t.responseStart - t.navigationStart;
//【重要】request請求耗時, 即內容載入完成的時間
// times.request = t.responseEnd - t.requestStart;
//【重要】解析 DOM 樹結構的時間
// times.domParse = t.domComplete - t.responseEnd;
//【重要】使用者可操作時間
times.domReady = t.domContentLoadedEventEnd - t.navigationStart;
//【重要】執行 onload 回撥函式的時間
times.onload = t.loadEventEnd - t.loadEventStart;
// 解除安裝頁面的時間
// times.unloadEvent = t.unloadEventEnd - t.unloadEventStart;
// TCP 建立連線完成握手的時間
times.tcpConnect = t.connectEnd - t.connectStart;
// 開始時間
times.startTime = t.navigationStart;
return times;
};
// 計算單個資源載入時間
wp.getEntryTiming = function (entry) {
// entry 的時間點都是相對於 navigationStart 的相對時間
var t = entry;
var times = {};
// 重定向的時間
// times.redirect = t.redirectEnd - t.redirectStart;
// DNS 查詢時間
// times.lookupDomain = t.domainLookupEnd - t.domainLookupStart;
// TCP 建立連線完成握手的時間
// times.connect = t.connectEnd - t.connectStart;
// 使用者下載時間
times.contentDownload = t.responseEnd - t.responseStart;
// ttfb 讀取首位元組的時間 等待伺服器處理
times.ttfb = t.responseStart - t.requestStart;
// 掛載 entry 返回
times.resourceName = entry.name; // 資源名稱, 也是資源的絕對路徑
times.entryType = entry.entryType; // 資源型別
times.initiatorType = entry.initiatorType; // link <link> | script <script> | redirect 重定向
times.duration = entry.duration; // 載入時間
// 記錄開始時間
times.connectStart = entry.connectStart;
return times;
}
// 根據 type 獲取相應 entries 的 performanceTiming
wp.getEntriesByType = function (type) {
if (type === undefined) {
return;
}
var entries = performance.getEntriesByType(type);
return entries;
};
/**
* 頁面初始化效能
* ------------------------------------------------------------------
*/
// 獲取檔案資源載入資訊 js/css/img
wp.getFileResourceTimingInfo = function () {
var entries = performance.getEntriesByType('resource');
var fileResourceInfo = {
number: entries.length, // 載入檔案數量
size: 0, // 載入檔案大小
};
return fileResourceInfo;
};
// 獲取頁面初始化完成的耗時資訊
wp.getPageInitCompletedInfo = function () {
// performance.now() 是相對於 navigationStart 的時間
var endTime = performance.now();
var pageInfo = this.getPerformanceTiming();
pageInfo.pageInitCompleted = endTime;
pageInfo.pageUrl = win.location.pathname;
pageInfo.pageId = this.currentPageId;
return pageInfo;
};
/**
* xhr 相關
* ------------------------------------------------------------------
*/
// 處理 xhr headers 資訊, 獲取傳輸大小
wp.handleXHRHeaders = function (headers) {
// Convert the header string into an array of individual headers
var arr = headers.trim().split(/[\r\n]+/);
// Create a map of header names to values
var headerMap = {};
arr.forEach(function (line) {
var parts = line.split(': ');
var header = parts.shift();
var value = parts.join(': ');
headerMap[header] = value;
});
return headerMap;
};
// 獲取 xhr 資源載入資訊, 即所有的 ajax 請求的資訊
wp.getXHRResourceTimingInfo = function () {
var entries = performance.getEntriesByType('resource');
if (entries.length === 0) {
return;
}
var xhrs = [];
for (var i = entries.length - 1; i >= 0; i--) {
var item = entries[i];
if (item.initiatorType && (item.initiatorType === 'xmlhttprequest')) {
var requestId;
if (item.name.lastIndexOf('?r=') > -1) {
requestId = item.name.substring(item.name.lastIndexOf('?r=') + 3);
}
var xhr = this.getEntryTiming(item);
if (requestId) {
xhr.requestId = requestId;
}
xhrs.push(xhr);
}
}
return xhrs;
};
// 通過 requestId 獲取特定 xhr 資訊
wp.getDesignatedXHRByRequestId = function (requestId, serviceName, headers) {
var entries = performance.getEntriesByType('resource');
if (entries.length === 0) {
return;
}
var xhr;
for (var i = entries.length - 1; i >= 0; i--) {
var item = entries[i];
if (item.initiatorType && (item.initiatorType === 'xmlhttprequest')) {
if (item.name.indexOf(requestId) > -1) {
xhr = this.getEntryTiming(item);
break;
}
}
}
var headerMap = this.handleXHRHeaders(headers);
xhr.requestId = requestId;
xhr.serviceName = serviceName;
xhr.pageId = this.currentPageId;
xhr.pageUrl = win.location.pathname;
xhr.transferSize = headerMap['content-length'];
xhr.startTime = performance.timing.navigationStart + parseInt(xhr.connectStart);
xhr.downloadSpeed = (xhr.transferSize / 1024) / (xhr.contentDownload / 1000);
return xhr;
};
/**
* 客戶端存取 xhr 資料
* ------------------------------------------------------------------
*/
// 儲存 xhr 資訊到客戶端 localStorage 中
wp.setItemToLocalStorage = function (xhr) {
var arrayObjectLocal = this.getItemFromLocalStorage();
if (arrayObjectLocal && Array.isArray(arrayObjectLocal)) {
arrayObjectLocal.push(xhr);
try {
localStorage.setItem('webperformance', JSON.stringify(arrayObjectLocal));
} catch (e) {
if (e.name == 'QuotaExceededError') {
// 如果 localStorage 超限, 移除我們設定的資料, 不再儲存
localStorage.removeItem('webperformance');
}
}
}
};
// 獲取客戶端儲存的 xhr 資訊, 返回陣列形式
wp.getItemFromLocalStorage = function () {
if (!win.localStorage) {
// 當前瀏覽器不支援
console.log('Browser does not support localStorage');
return;
}
var localStorage = win.localStorage;
var arrayObjectLocal = JSON.parse(localStorage.getItem('webperformance')) || [];
return arrayObjectLocal;
};
// 移除客戶端儲存的 xhr 資訊
wp.removeItemFromLocalStorage = function () {
if (!win.localStorage) {
// 當前瀏覽器不支援
console.log('Browser does not support localStorage');
return;
}
localStorage.removeItem('webperformance');
};
/**
* 工具方法
* ------------------------------------------------------------------
*/
// 生成唯一標識
wp.generateGUID = function () {
var d = new Date().getTime();
if (typeof performance !== 'undefined' && typeof performance.now === 'function') {
d += performance.now();
}
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random() * 16) % 16 | 0;
d = Math.floor(d / 16);
return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
});
};
/**
* 封裝 xhr 請求
* ------------------------------------------------------------------
*/
wp.ajax = (function () {
var URL = '../UpdataProfilerHandler.aspx';
var ajax = function (type, input, success, error) {
var data = 'name=' + type + '&data=' + escape(JSON.stringify(input));
var xhr = new XMLHttpRequest();
xhr.open('POST', URL, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function () {
if ((xhr.readyState == 4) && (xhr.status == 200)) {
var result = JSON.parse(xhr.responseText);
success && success(result);
}
};
xhr.send(data);
};
return ajax;
})();
/**
* 上報伺服器
* ------------------------------------------------------------------
*/
// 上報伺服器頁面初始化效能資訊
wp.sendPagePerformanceInfoToServer = function () {
var pageInfo = this.getPageInitCompletedInfo();
this.showInfoOnPage(pageInfo, 'page'); // 要在記錄 this.pagePerformanceInfo 之前呼叫
this.showInfoOnPage(this.xhrInfoArr, 'ajax');
this.pagePerformanceInfo = JSON.parse(JSON.stringify(pageInfo));
try {
this.ajax('Page', pageInfo, function () {
console.log('send page performance info success')
});
} catch (e) {
throw e;
}
};
// 上報伺服器 xhr 資訊
wp.sendXHRPerformanceInfoToServer = function () {
var xhrInfo = this.getItemFromLocalStorage();
if (!xhrInfo || xhrInfo.length === 0) {
return;
}
try {
this.ajax('Ajax', xhrInfo, function () {
console.log('send ajax performance info success')
wp.removeItemFromLocalStorage();
});
} catch (e) {
throw e;
}
};
// 上報伺服器
wp.sendPerformanceInfoToServer = function () {
if (this.pagePerformanceInfo) {
return;
}
this.sendPagePerformanceInfoToServer();
this.sendXHRPerformanceInfoToServer();
};
/**
* 當前頁面資料展示(開發除錯用)
* ------------------------------------------------------------------
*/
// 頁面資訊描述
// var pageInfoDescribe = {
//pageLoad: '載入用時(ms)',
//pageInitCompleted: '初始化完成(ms)'
// };
// 請求資訊描述
// var xhrInfoDescribe = {
//serviceName: '服務名稱',
//ttfb: '伺服器處理(ms)',
//contentDownload: '資料下載(ms)',
//transferSize: '資料大小(byte)',
//downloadSpeed: '下載速度(kb/s)'
// };
// 記錄頁面初始化完成前的 ajax 資訊, 或者列印初始化完成後的 ajax 資訊到頁面
wp.recordAjaxInfo = function (xhr) {
if (!this.pagePerformanceInfo) {
this.xhrInfoArr.push(xhr);
} else {
this.showInfoOnPage(xhr, 'action');
}
};
// 在當前頁面顯示相關資訊
wp.showInfoOnPage = function (info, type) {
// 如果傳入引數為空或除錯開關未開啟 return
if (!win.localStorage.getItem('windProfiler') || !info) {
return;
}
info = JSON.parse(JSON.stringify(info));
var debugInfo = document.getElementById(this.currentPageId);
if (debugInfo === null) {
debugInfo = document.createElement('div');
debugInfo.id = this.currentPageId;
debugInfo.className = 'debuginfo';
document.body.appendChild(debugInfo);
var style = document.createElement('style');
style.type = "text/css";
style.innerHTML = 'div.debuginfo{' +
'background-color: #000;' +
'color: #fff;' +
'border: 1px solid sliver;' +
'padding: 5px;' +
'width: 500px;' +
'height: 300px;' +
'position: absolute;' +
'right: 10px;' +
'bottom: 10px;' +
'overflow: auto;' +
'z-index: 9999;' +
'}' +
'div.debuginfo table th, td{' +
'padding: 5px;' +
'}';
document.getElementsByTagName('head').item(0).appendChild(style);
}
var title, message, table = '',
th = '',
td = '',
tableHead = '<table style="border-collapse: separate;" border="1">',
tableEnd = '</table>';
if (type === 'page') {
title = '頁面資訊';
th += '<tr><th>載入用時(ms)</th><th>初始化完成(ms)</th></tr>';
td += '<tr><td>' + info.pageLoad.toFixed(2) + '</td><td>' + info.pageInitCompleted.toFixed(2) + '</td></tr>';
} else if (type === 'ajax') {
title = '請求資訊(初始化)';
th += '<tr><th>服務名稱</th><th>伺服器耗時</th><th>下載耗時</th><th>資料大小</th><th>下載速度(kb/s)</th></tr>';
for (var i = 0; i < info.length; i++) {
td += '<tr><td>' + info[i].serviceName + '</td><td>' + info[i].ttfb.toFixed(2) + '</td><td>' + info[i].contentDownload.toFixed(2) +
'</td><td>' + info[i].transferSize + '</td><td>' + info[i].downloadSpeed.toFixed(2) + '</td></tr>';
}
} else if (type === 'action') {
title = '請求資訊(使用者操作)';
td += '<td>' + info.serviceName + '</td><td>' + info.ttfb.toFixed(2) + '</td><td>' + info.contentDownload.toFixed(2) +
'</td><td>' + info.transferSize + '</td><td>' + info.downloadSpeed.toFixed(2) + '</td>';
var actionTable = debugInfo.querySelector('.action');
if (actionTable === null) {
var html = '<table class="action" style="border-collapse: separate;" border="1">';
html += '<tr><th>服務名稱</th><th>伺服器耗時</th><th>下載耗時</th><th>資料大小</th><th>下載速度(kb/s)</th></tr>';
html += '<tr>' + td + '</tr>';
html += '</table>';
debugInfo.innerHTML += '<p>' + title + '</p>';
debugInfo.innerHTML += html;
} else {
var tr = actionTable.insertRow(-1);
tr.innerHTML = td;
}
return;
}
table += tableHead + th + td + tableEnd;
debugInfo.innerHTML += '<p>' + title + '</p>';
debugInfo.innerHTML += table + '<br>';
};
/**
* 對外介面, 控制除錯頁面的開關
* ------------------------------------------------------------------
*/
performance.windProfiler = (function (win) {
var profiler = {
openClientDebug: function () {
try {
win.localStorage.setItem('windProfiler', 'debug');
console.log('除錯已開啟，請重新整理頁面');
} catch (e) {
throw e;
}
},
closeClientDebug: function () {
try {
win.localStorage.removeItem('windProfiler');
console.log('除錯已關閉');
} catch (e) {
throw e;
}
}
};
return profiler;
})(win);
/**
* 事件繫結
* ------------------------------------------------------------------
*/
// 監聽 DOMContentLoaded 事件, 獲取檔案資源載入資訊
win.document.addEventListener('DOMContentLoaded', function (event) {
// var resourceTimingInfo = wp.getFileResourceTimingInfo();
});
// 監聽 load 事件, 獲取 PerformanceTiming 資訊
win.addEventListener('load', function (event) {
// setTimeout(function () {
//wp.sendPagePerformanceInfoToServer();
// }, 0);
});
// 生成當前頁面唯一 id
wp.currentPageId = wp.generateGUID();
return wp;
}
/**
* 模組匯出, 相容 CommonJS AMD 及 原生JS
* ------------------------------------------------------------------
*/
if (typeof module === "object" && typeof module.exports === "object") {
module.exports = factory();
} else if (typeof define === "function" && define.amd) {
define(factory);
} else {
win.WebPerformance = factory();
}
})(typeof window !== 'undefined' ? window : global);
ajax-request.js
/**
* 封裝 jquery ajax
* 例如:
* ajaxRequest.ajax.triggerService(
*'apiCommand', [命令資料] )
*.then(successCallback, failureCallback);
* );
*/
var WebPerformance = require('./web-performance'); // 網頁效能監控模組
var JSON2 = require('LibsDir/json2');
var URL = '../AjaxSecureHandler.aspx?r=';
var requestIdentifier = {};
var ajaxRequest = ajaxRequest || {};
(function ($) {
if (!$) {
throw 'jquery獲取失敗!';
}
ajaxRequest.json = JSON2;
ajaxRequest.ajax = function (userOptions, serviceName, requestId) {
userOptions = userOptions || {};
var options = $.extend({}, ajaxRequest.ajax.defaultOpts, userOptions);
options.success = undefined;
options.error = undefined;
return $.Deferred(function ($dfd) {
$.ajax(options)
.done(function (result, textStatus, jqXHR) {
if (requestId === requestIdentifier[serviceName]) {
ajaxRequest.ajax.handleResponse(result, $dfd, jqXHR, userOptions, serviceName, requestId);
}
})
.fail(function (jqXHR, textStatus, errorThrown) {
if (requestId === requestIdentifier[serviceName]) {
// jqXHR.status
$dfd.reject.apply(this, arguments);
userOptions.error.apply(this, arguments);
}
});
});
};
$.extend(ajaxRequest.ajax, {
defaultOpts: {
// url: '../AjaxSecureHandler.aspx',
dataType: 'json',
type: 'POST',
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
},
handleResponse: function (result, $dfd, jqXHR, userOptions, serviceName, requestId) {
if (!result) {
$dfd && $dfd.reject(jqXHR, 'error response format!');
userOptions.error(jqXHR, 'error response format!');
return;
}
if (result.ErrorCode != '200') {
// 伺服器已經錯誤
$dfd && $dfd.reject(jqXHR, result.ErrorMessage);
userOptions.error(jqXHR, result);
return;
}
try {
// 將此次請求的資訊儲存到客戶端的 localStorage
var headers = jqXHR.getAllResponseHeaders();
var xhr = WebPerformance.getDesignatedXHRByRequestId(requestId, serviceName, headers);
WebPerformance.setItemToLocalStorage(xhr);
WebPerformance.recordAjaxInfo(xhr); // 要在成功的回撥之前呼叫
} catch (e) {throw e}
if (result.Data) {
// 將大於2^53的數字（16位以上）包裹雙引號，避免溢位
var jsonStr = result.Data.replace(/(:\s*)(\d{16,})(\s*,|\s*})/g, '$1"$2"$3');
var resultData = ajaxRequest.json.parse(jsonStr);
$dfd.resolve(resultData);
userOptions.success && userOptions.success(resultData);
} else {
$dfd.resolve();
userOptions.success && userOptions.success();
}
},
buildServiceRequest: function (serviceName, input, userSuccess, userError, ajaxParams) {
var requestData = {
MethodAlias: serviceName,
Parameter: input
};
var request = $.extend({}, ajaxParams, {
data: 'data=' + escape(ajaxRequest.json.stringify(requestData)),
success: userSuccess,
error: function (jqXHR, textStatus, errorThrown) {
console.log(serviceName, jqXHR);
if (userError && (typeof userError === 'function')) {
userError(jqXHR, textStatus, errorThrown);
}
}
});
return request;
},
triggerService: function (serviceName, input, success, error, ajaxParams) {
var request = ajaxRequest.ajax.buildServiceRequest(serviceName, input, success, error, ajaxParams);
// 生成此次 ajax 請求唯一標識
var requestId = requestIdentifier[serviceName] = WebPerformance.generateGUID();
request.url = URL + requestId;
return ajaxRequest.ajax(request, serviceName, requestId);
}
});
})(jQuery);
module.exports = ajaxRequest;