首屏和白屏时间计算

首先明确，首屏和白屏的时间计算，没有明确的API可以得到。

白屏 = 开始显示body的时间 - 开始请求的时间

首屏 = 首屏内容渲染结束的时间 - 开始请求的时间

具体计算方法如下：

1. 白屏

支持performance api，开始请求的时间 performance.timing.navigationStart

<html>
    <head>
        <title>白屏时间</title>
        <link href="xxxxx"/>
        <script>var endTime = new Date() </script>
    </head>    
    <body>    
    </body>
</html>

白屏 = endTime - performance.timing.navigationStart

不支持performance api，只能采用打点的方式，在dom中插入 <script> startTime = Date.now(); </script>

<html>
    <head>
        <script> var startTime = new Date() </script>       
        <title>白屏时间</title>
        <link href="xxxxx"/>
        <link href="xxxxx"/>
        <script> var endTime = new Date() </script>    
    </head>    
    <body></body>
</html>

白屏 = endTime - startTime

2. 首屏

首屏是指，在不滚动屏幕前提下，第一屏页面显示完成花费的时间。页面内容显示完成，才算首屏时间，部分未显示，不算。首屏时间一般在5秒内，算优秀，在10秒内可接受，超过10秒，无法忍受。

首屏渲染结束这个时间，无法确切的计算。一般可以在几个近似的地方打点：

1. 首屏dom和第二屏dom之间 打点 不同屏幕尺寸，有差异，模糊计算
2. 首屏图片中最慢的加载完成 打点 监听所有首屏的图片，在onload事件中，记录时间最大值
3. 在domReady或onload中 打点

posted @ 2020-05-21 14:34  全玉  阅读(1360)  评论(0)  编辑  收藏  举报