前端页面速度统计方法

如何统计首屏时间

在页面的各个阶段，将时间打印出来，亦或者是使用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');
};

前端页面速度统计方法

如何统计首屏时间

如何统计白屏时间

如何统计用户可操作时间

如何打印总下载时间

猜你喜欢