前端速度统计

此文只是作为一个大纲类文章，介绍下前端速度统计主要指标和获取方法:

好了，不废话，直接开始

1、网站都有哪些指标？

1.1 首屏时间

包括首屏的DOM元素的渲染，展现在用户第一屏幕的所有图片都完成

1.2 白屏时间

即页面处于空白的时间。

1.3 用户可操作时间

一般来说， domready 时间，便是我们的用户可操作时间。

1.4 总下载时间

页面总体的下载时间，所有页面资源都下载完成

接下来，我们学习下怎么快乐的统计上述指标：

我们这边用的是 HTML5的performance接口，这个属性大家可以自己去了解，属性内容太多，我这边就不做具体介绍了。

(1) 怎么统计首屏时间？

在统计首屏时间之前，我们需要定义一个基准，就是，什么时候用户点开的当前网页？
将以下代码加在代码顶部，<meta>下面即可：

<script type="text/javascript">
    window.logInfo = {};
    window.logInfo.openTime = performance.timing.navigationStart;
</script>

然后，大约在首屏处加上我们的统计：

<script type="text/javascript">
    window.logInfo.firstScreen = +new Date() - window.logInfo.openTime;
    console.log("首屏时间：" + window.logInfo.firstScreen + 'ms')
</script>

(2) 怎么统计白屏时间？

在页面的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>

(3) 怎么统计用户可操作时间？

监听DOMContentLoaded事件：

document.addEventListener('DOMContentLoaded', function(event){
    window.logInfo.readyTime = +new Date() - window.logInfo.openTime;
    console.log('用户可操作时间：', window.logInfo.readyTime);
})

(4) 如何统计总下载时间？

监听onload事件：

window.onload = function () {
    window.logInfo.allloadTime = +new Date() - window.logInfo.openTime;
    console.log('总下载时间：', window.logInfo.allloadTime + 'ms');
};