前端頁面速度統計方法
阿新 • • 發佈：2018-12-15
如何統計首屏時間
在頁面的各個階段，將時間打印出來，亦或者是使用html5新增的介面：performance來評估一下自己的網站到底差在哪裡(如圖)。
網頁最開始的跳轉時間：HTML5的performance介面提供了這個時間：performance.timing.navigationStart。
然後在估算接近於一螢幕的元素的位置後，列印一下當前時間。
並且把首屏中所有圖片的載入時間也算上。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"> <script type="text/javascript"> window.logInfo = {}; window.logInfo.openTime = performance.timing.navigationStart; </script> </head> <body> <div>這是第一屏，這是第一屏</div> <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"> <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"> <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"> <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"> <div>第一屏結尾，第一屏結尾</div> <script type="text/javascript"> (function logFirstScreen() { var images = document.getElementsByTagName('img'); var iLen = images.length; var curMax = 0; var inScreenLen = 0; // 圖片的載入回撥 function imageBack() { this.removeEventListener && this.removeEventListener('load', imageBack, !1); if (++curMax === inScreenLen) { // 如果所有在首屏的圖片均已載入完成了的話，傳送日誌 log(); } } // 對於所有的位於指定區域的圖片，繫結回撥事件 for (var s = 0; s < iLen; s++) { var img = images[s]; var offset = { top: 0 }; var curImg = img; while (curImg.offsetParent) { offset.top += curImg.offsetTop; curImg = curImg.offsetParent; } // 判斷圖片在不在首屏 if (document.documentElement.clientHeight < offset.top) { continue; } // 圖片還沒有載入完成的話 if (!img.complete) { inScreenLen++; img.addEventListener('load', imageBack, !1); } } // 如果首屏沒有圖片的話，直接傳送日誌 if (inScreenLen === 0) { log(); } // 傳送日誌進行統計 function log () { window.logInfo.firstScreen = +new Date() - window.logInfo.openTime; console.log('首屏時間：', window.logInfo.firstScreen + 'ms'); } })(); </script> <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"> <img src="http://static.oschina.net/uploads/space/2016/0623/152644_6UUC_1177792.png"> </body> </html>
如何統計白屏時間
可以在頁面的head底部新增的JS程式碼來統計白屏時間，雖然這樣做可能並不十分精準，但是也可以基本代表了首屏時間
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0"> <script type="text/javascript"> window.logInfo = {}; window.logInfo.openTime = performance.timing.navigationStart; window.logInfo.whiteScreenTime = +new Date() - window.logInfo.openTime; console.log('白屏時間：', window.logInfo.whiteScreenTime + 'ms'); </script> </head>
如何統計使用者可操作時間
1、當 onload 事件觸發時，頁面上所有的DOM，樣式表，指令碼，圖片，flash都已經載入完成了。
2、當 DOMContentLoaded 事件觸發時，僅當DOM載入完成，不包括樣式表，圖片，flash。
document .addEventListener( 'DOMContentLoaded', function (event) { window.logInfo.readyTime = +new Date() - window.logInfo.openTime; console.log('使用者可操作時間：', window.logInfo.readyTime); } );
如何列印總下載時間
使用window.onload即可，
window.onload = function () {
window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
console.log('總下載時間：', window.logInfo.allloadTime + 'ms');
};