白屏时间
<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 |
欢迎留言评论你们开发的应用的白屏时间和首屏时间分别是多少
