提升用户体验之监控页面性能

白屏时间

<script>
  const observer = new PerformanceObserver((list) => {
      const entries = list.getEntries();
      for (const entry of entries) {
          if (entry.name === 'first-paint') {
              const whiteScreenTime = entry.startTime;
              console.log('白屏时间: ' + whiteScreenTime + ' ms');
          }
      }
  });
  observer.observe({ type: 'paint', buffered: true });
</script>

首屏时间

<script>
  const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntriesByName('first-contentful-paint')) {
      console.log('首屏时间（FCP）:', entry.startTime.toFixed(2), 'ms');
    }
  });
  observer.observe({ type: 'paint', buffered: true });
</script>

不同场景下的 “合适值”（核心参考）

场景 / 标准	优秀（推荐目标）	良好（可接受）	需优化（体验差）
通用 Web 标准（Google Core Web Vitals）	< 1000ms（1 秒）	1000-3000ms	> 3000ms
Vue3 应用（PC / 高性能移动端）	< 800ms	800-1500ms	> 1500ms
Vue3 应用（低性能移动端 / 弱网）	< 1500ms	1500-3000ms	> 3000ms
核心业务场景（电商 / 支付 / 登录）	< 800ms	800-1200ms	> 1200ms
ToB 后台管理系统（PC）	< 2000ms	2000-3000ms	> 3000ms

欢迎留言评论你们开发的应用的白屏时间和首屏时间分别是多少