前端白屏问题_前端优化-如何计算白屏和首屏时间

白屏时间

白屏时间指的是浏览器开始显示内容的时间。因此我们只需要知道是浏览器开始显示内容的时间点，即页面白屏结束时间点即可获取到页面的白屏时间。

计算白屏时间

因此，我们通常认为浏览器开始渲染 

 标签或者解析完  标签的时刻就是页面白屏结束的时间点。白屏

//不兼容performance.timing 的浏览器，如IE8

window.pageStartTime=Date.now();

//白屏时间结束点

window.firstPaint=Date.now();

因此白屏时间则可以这样计算出：

可使用 Performance API 时

白屏时间 = firstPaint - performance.timing.navigationStart;

不可使用 Performance API 时

白屏时间 = firstPaint - pageStartTime;

首屏时间

首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。对于用户体验来说，首屏时间是用户对一个网站的重要体验因素。通常一个网站，如果首屏时间在5秒以内是比较优秀的，10秒以内是可以接受的，10秒以上就不可容忍了。超过10秒的首屏时间用户会选择刷新页面或立刻离开。

通常计算首屏的方法有

首屏模块标签标记法

统计首屏内加载最慢的图片的时间

自定义首屏内容计算法

1、首屏模块标签标记法

首屏模块标签标记法，通常适用于首屏内容不需要通过拉取数据才能生存以及页面不考虑图片等资源加载的情况。我们会在 HTML 文档中对应首屏内容的标签结束位置，使用内联的 JavaScript 代码记录当前时间戳。如下所示：

首屏

window.pageStartTime=Date.now();