此文只是作为一个大纲类文章，介绍下前端速度统计主要指标和获取方法:
好了，不废话，直接开始
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');
};
