面试题·如何计算白屏时间-CSDN博客

本文链接：https://blog.csdn.net/qq_41205754/article/details/148276470

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

一、白屏时间是什么？

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

通俗理解：白屏时间越短，用户感受越好；白屏时间越长，用户会产生“是不是网卡了？”的焦虑。

二、白屏时间 VS 首屏时间

别搞混啦！

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

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

测量白屏，更关注“第一个像素”的出现！

三、测量白屏时间的原理

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

浏览器相关的关键节点

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

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

四、用代码测量白屏时间

方式一：利用Performance API

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，也可以简单用以下方式：

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

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

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

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

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