面试题·如何计算白屏时间

"白屏时间"是用户最直观能感受到的一个指标。它直接决定了用户打开页面时,是"秒开"还是"苦等"。今天,我们就来聊聊:什么是白屏时间,如何测量它,以及如何用代码实现自动埋点。

一、白屏时间是什么?

白屏时间,指的是用户从发起页面请求(通常是点击链接或输入网址并回车)到浏览器首次渲染出内容之间的时间。这段时间内,用户看到的页面通常是一片空白,因此叫"白屏时间"。

通俗理解:白屏时间越短,用户感受越好;白屏时间越长,用户会产生"是不是网卡了?"的焦虑。

二、白屏时间 VS 首屏时间

别搞混啦!

白屏时间:页面首次有内容渲染出来的时间点。

首屏时间:页面主要内容渲染完成的时间点

测量白屏,更关注"第一个像素"的出现!

三、测量白屏时间的原理

核心思路:记录页面请求发起到首次内容渲染之间的时间差。

浏览器相关的关键节点

  1. navigationStart 用户发起页面加载的时间点。
  2. firstPaint(FP)/ first-contentful-paint(FCP) 浏览器首次像素渲染(FP)/首次有内容渲染(FCP)的时间点。

一般我们用FCP(首次内容绘制)来代表白屏时间。

四、用代码测量白屏时间

方式一:利用Performance API

javascript 复制代码
window.addEventListener('load', () => {
  // 1. 获取 navigationStart
  const navigationStart = performance.timing.navigationStart;
  
  // 2. 获取 First Contentful Paint (FCP)
  let fcp = 0;
  // 使用 PerformanceObserver 监听 FCP
  new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      if (entry.name === 'first-contentful-paint') {
        fcp = entry.startTime;
        const whiteScreenTime = fcp;
        console.log('白屏时间:', whiteScreenTime, 'ms');
        // 你也可以上报到你的监控系统
      }
    }
  }).observe({ type: 'paint', buffered: true });
});

代码说明

  • performance.timing.navigationStart 是页面加载起点。
  • first-contentful-paint 代表首次内容渲染时间点。 两者的差值就是白屏时间!

方式二:极简方案(不考虑SSR,适合纯前端项目) 如果你的浏览器不支持PerformanceObserver,也可以简单用以下方式:

javascript 复制代码
window.onload = function () {
  const navigationStart = performance.timing.navigationStart;
  const domContentLoaded = performance.timing.domContentLoadedEventEnd;
  console.log('白屏时间(近似):', domContentLoaded - navigationStart, 'ms');
};

这种方式只是近似!最推荐还是用FCP。

五、如何自动上报白屏时间?

可以在代码里把测量到的白屏时间,通过fetch或图片打点的方式,上报给你的性能监控系统。比如:

javascript 复制代码
function reportWhiteScreenTime(time) {
  fetch('/api/monitor/whiteScreen', {
    method: 'POST',
    body: JSON.stringify({ time }),
    headers: {
      'Content-Type': 'application/json'
    }
  });
}

在PerformanceObserver回调里调用reportWhiteScreenTime(whiteScreenTime)就搞定啦!

六、常见问题

Q1:为什么不同浏览器测出来的白屏时间不一样? A1:渲染机制、API实现、缓存命中等原因,都会有差异,所以要以主流用户环境为主。

Q2:SSR/服务端渲染还用测白屏吗? A2:SSR下白屏通常极短,更关注首屏加载完成时间,但FCP依然可以作为一个衡量点。

七、写在最后

测量白屏时间,既能帮助你定位性能瓶颈,也能为你优化页面加载体验提供数据支撑。动手加个埋点吧,产品体验就是这样一点点被你打磨出来的!

相关推荐
良木林几秒前
JS中正则表达式的运用
前端·javascript·正则表达式
JosieBook1 小时前
【SpringBoot】21-Spring Boot中Web页面抽取公共页面的完整实践
前端·spring boot·python
吃饭睡觉打豆豆嘛2 小时前
深入剖析 Promise 实现:从原理到手写完整实现
前端·javascript
前端端2 小时前
claude code 原理分析
前端
GalaxyMeteor2 小时前
Elpis 开发框架搭建第二期 - Webpack5 实现工程化建设
前端
Spider_Man2 小时前
从 “不会迭代” 到 “面试加分”:JS 迭代器现场教学
前端·javascript·面试
我的写法有点潮2 小时前
最全Scss语法,赶紧收藏起来吧
前端·css
小高0072 小时前
🧙‍♂️ 老司机私藏清单:从“记事本”到“旗舰 IDE”,我只装了这 12 个插件
前端·javascript·vue.js
Mo_jon2 小时前
css 遮盖滚动条,鼠标移上显示
前端·css
EveryPossible2 小时前
终止异步操作
前端·javascript·vue.js