当前位置：首页 > news >正文

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

news 2025/9/18 3:07:31

文章目录

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

一、首屏时间

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

简单点就是在<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>