生活随笔
收集整理的這篇文章主要介紹了
前端页面速度统计方法
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
如何統計首屏時間
在頁面的各個階段，將時間打印出來，亦或者是使用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');
};
總結
以上是生活随笔為你收集整理的前端页面速度统计方法的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
