页面关键性能指标(必记)

关键性能指标：

1. 白屏时间（first Paint Time）——用户从打开页面开始到页面开始有东西呈现为止

2. 首屏时间——用户浏览器首屏内所有内容都呈现出来所花费的时间

3. 用户可操作时间(dom Interactive)——用户可以进行正常的点击、输入等操作，默认可以统计domready时间，因为通常会在这时候绑定事件操作

4. 总下载时间——页面所有资源都加载完成并呈现出来所花的时间，即页面 onload 的时间

具体计算：

1. 白屏时间 = 开始渲染时间(首字节时间+HTML下载完成时间)+头部资源加载时间。

performance.timing.responseStart - performance.timing.navigationStart

// or 在 chrome 高版本下

(chrome.loadTimes().firstPaintTime - chrome.loadTimes().startLoadTime)*1000

2. 首屏时间 = 白屏时间 + 首屏渲染时间

首屏时间的统计比较复杂，因为涉及图片等多种元素及异步渲染等方式。观察加载视图可发现，影响首屏的主要因素的图片的加载。通过统计首屏内图片的加载时间便可以获取首屏渲染完成的时间。统计流程如下：

首屏位置调用 API 开始统计 -> 绑定首屏内所有图片的 load 事件 -> 页面加载完后判断图片是否在首屏内，找出加载最慢的一张 -> 首屏时间

3. 用户可操作时间

performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart

4. onload 总下载时间

performance.timing.loadEventEnd - performance.timing.navigationStart