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

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

一、白屏时间是什么?

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

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

二、白屏时间 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依然可以作为一个衡量点。

七、写在最后

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

相关推荐
y_y20 小时前
Streamable HTTP:下一代实时通信协议,解决SSE的四大痛点
前端·http
无羡仙20 小时前
流式输出SSE
前端
小噔小咚什么东东21 小时前
Vue开发H5项目中基于栈的弹窗管理
前端·vue.js·vant
OpenTiny社区21 小时前
基于华为云大模型服务MaaS和OpenTiny框架实现商城商品智能化管理
前端·agent·mcp
云枫晖21 小时前
JS核心知识-原型和原型链
前端·javascript
小卓笔记21 小时前
第1章 Web服务-nginx
前端·网络·nginx
华仔啊21 小时前
Vue+CSS 做出的LED时钟太酷了!还能倒计时,代码全开源
前端·css·vue.js
m0_564914921 天前
点击EDGE浏览器下载的PDF文件总在EDGE中打开
前端·edge·pdf
@大迁世界1 天前
JavaScript 2.0?当 Bun、Deno 与 Edge 运行时重写执行范式
开发语言·前端·javascript·ecmascript
red润1 天前
Day.js 是一个轻量级的 JavaScript 日期处理库,以下是常用用法:
前端·javascript