白屏与首屏时间计算

白屏

白屏就是当浏览器输入地址按回车到页面出现首个字符或者元素，在这之间就是所谓的白屏
计算白屏的时间默认浏览器解析完head标签的值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.starTime=new Date();
    </script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
    <script>
        window.endTime=new Date();
    </script>
</head>
<body>
    
</body>
</html>

可使用 Performance API 时
白屏时间 = endTime - performance.timing.navigationStart;
不可使用 Performance 时
这个时候就白屏时间就是 endTime - starTime

首屏加载

首屏时间是指用户打开网站开始，到浏览器首屏内容渲染完成的时间。

首屏模块标签标记法

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首屏</title>
	<script>
	    window.startTime= Date.now();
	</script>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
	<!-- 首屏可见模块1 -->
	<div class="module-1"></div>
	<!-- 首屏可见模块2 -->
	<div class="module-2"></div>
	<script>
		window.endTime= Date.now();
	</script>
	<!-- 首屏不可见模块3 -->
	<div class="module-3"></div>
 	<!-- 首屏不可见模块4 -->
	<div class="module-4"></div>
</body>
</html>

此时首屏时间等于 endTime - performance.timing.navigationStart;

统计首屏内图片完成加载的时间

通常我们首屏内容加载最慢的就是图片资源，因此我们会把首屏内加载最慢的图片的时间当做首屏的时间。

由于浏览器对每个页面的 TCP 连接数有限制，使得并不是所有图片都能立刻开始下载和显示。因此我们在 DOM树构建完成后将会去遍历首屏内的所有图片标签，并且监听所有图片标签 onload 事件，最终遍历图片标签的加载时间的最大值，并用这个最大值减去 navigationStart 即可获得近似的首屏时间。

此时首屏时间等于加载最慢的图片的时间点 - performance.timing.navigationStart;

自定义模块内容计算法

由于统计首屏内图片完成加载的时间比较复杂。因此我们在业务中通常会通过自定义模块内容，来简化计算首屏时间。如下面的做法：

忽略图片等资源加载情况，只考虑页面主要 DOM
只考虑首屏的主要模块，而不是严格意义首屏线以上的所有内容

qq_40633789

发布了6 篇原创文章 · 获赞 0 · 访问量 107

私信关注