【前端】如何计算首屏及白屏时间

一颗不甘坠落的流星

已于 2024-03-13 11:39:15 修改

阅读量586

点赞数 8

分类专栏：前端笔记文章标签：前端 javascript 开发语言 js

于 2024-03-13 11:38:42 首次发布

本文链接：https://blog.csdn.net/qq_45677671/article/details/136675036

版权

前端笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章目录

- 一、首屏时间
- 二、白屏时间

一、首屏时间

白屏时间：页面渲染完所有内容的时间

简单点就是在<body> 标签后写js代码计算，但是不是很准确

<head>
	<title>白屏时间</title>
</head>
<body></body>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('首屏时间结束点：', time)
</script>

还有一个思路就是利用 MutationObserver 监控DOM的变化，变化幅度最大一次时间的就是首屏时间

1. DOM的增加、修改、删除，会触发 MutationObserver
2. 每次 DOM 变化可以计算出一个相对时间(time)和 DOM 变化的分数，并存入一个 observerData 数组中
3. 而后处理 observerData 数组，计算 DOM 变化时分数的差值，取 DOM 分数变化最大的时间点作为首屏时间的取值点
4. 因为首屏并不是所有DOM都渲染，所以不能取最后一项DOM加载完的时间

二、白屏时间

白屏时间：页面开始显示内容的时间

一般浏览器开始渲染 <body> 标签或者解析完 <head> 标签，就是页面白屏结束的时间点。

<head>
	<title>白屏时间</title>
</head>
<script type="text/javascript">
const time = Date.now() - performance.timing.navigationStart
console.log('白屏时间结束点：', time)
</script>

如果不支持performance，可以这样做

<head>
	<title>白屏时间</title>
	<script type="text/javascript">
		window.start = Date.now();
		console.log('白屏时间开始点：', window.start)
	</script>
</head>
<script type="text/javascript">
const time = Date.now() - window.start
console.log('白屏时间结束点：', time)
</script>