# 白屏时间计算
白屏时间 FP = 页面开始渲染时间点 - 页面开始请求时间点
FP = domLoading - fetchStatr
domLoading 代表浏览器开始解析html文档的时间节点。
fetchStart 代表浏览器已经准备好发起网络请求，准备开始请求的时间节点。
# FPS 计算
FPS（Frames Per Second）：每秒显示帧数。
计算 FPS 可以利用 requestAnimationFrame API 的特性，假设页面加载用时 x 毫秒，期间 requestAnimationFrame 执行了 n 次，那么 FPS = (n * 1000 ) / x
但是需要考虑 requestAnimationFrame 的兼容性，详见：requestAnimationFrame (opens new window)
# 网络环境情况采集
# window.navigator.onLine
window.navigator.onLine 的属性值为布尔类型，为 true 表示联网，false 表示断开了网络连接。只能简单判断是否联网，无法细分当前的网络状态是 WiFi / 4G / 3G / 2G
# window.ononline / window.onoffline
window.ononline / window.onoffline 是在网络连接恢复和断开时触发的时间，可以监听这两个事件，并在回调中采集。
图片测速法
通过让客户端向服务端请求一个较小体积的图片，在图片请求之初打上一个时间点，在图片 onLoad 事件被触发时再打上一个时间点，使用图片体积除以时间差就可以获取到当前的网速。需要注意的是，图片体积一定要小，否则会阻塞业务代码。另外，可以采取多张图片取平均值的方式来减少网络环境波动带来的误差。
# navigator.connection
Navigator 接口的 connection 只读属性返回一个包含有关系统网络连接信息的 NetworkInformation对象，例如用户设备的当前带宽或连接是否按流量计费。
这可以用于根据用户的连接状态来选择高清晰度内容或低清晰度内容。
可以通过返回值判断用户当前处于 WiFi / 4G / 3G / 2G 中的哪一个网络环境，缺点是兼容性太低，Firefox 和 Safari 完全不支持，不建议使用。
参考资料：