首屏加载优化：白屏时间、FP、FCP、LCP、SSR/SSG、预渲染等
首屏加载速度直接决定用户留存与转化，是 Vue 性能面试的必考板块。面试官关注的不只是指标定义，更看重你从「问题诊断 → 策略选型 → 效果验证」的完整链路思维。本章围绕 Web Vitals 核心指标与 SSR/SSG/预渲染三大方案，拆解高频问答与实战模板。
首屏加载核心指标速查表
| 指标 | 全称 | 含义 | 优化目标 | 关键优化手段 |
|---|---|---|---|---|
| FP | First Paint | 首次绘制 | < 1.8s | 内联关键 CSS，减少渲染阻塞资源 |
| FCP | First Contentful Paint | 首次内容绘制 | < 1.8s | 关键 CSS 提取，字体预加载，优化首屏 DOM |
| LCP | Largest Contentful Paint | 最大内容绘制 | < 2.5s | 图片优化(压缩/WebP/懒加载)，延迟三方脚本 |
| TTI | Time to Interactive | 可交互时间 | < 3.8s | JS 代码分割，路由懒加载，长任务拆分 |
📌 面试问题 1：请解释首屏加载的关键指标（FP、FCP、LCP）及优化目标
是否理解 Web Vitals 核心指标的具体含义与测量方式；能否给出量化的优化阈值；是否了解各指标对应的优化方向。
- 定义指标：FP 首次绘制 → FCP 首次内容绘制 → LCP 最大内容绘制，逐层递进描述用户感知。
- 给出目标值：FP < 1.8s，FCP < 1.8s，LCP < 2.5s（Google 建议）。
- 说明测量方式：Lighthouse / Performance 面板 / Web Vitals API。
- 关联优化手段：关键 CSS 内联、资源压缩、图片优化、SSR / 预渲染等。
首屏核心指标包括 FP、FCP 和 LCP。FP 是首次绘制，FCP 是首次内容绘制，LCP 是最大内容绘制。优化目标：FP < 1.8s，FCP < 1.8s，LCP < 2.5s。通过内联关键 CSS、减少渲染阻塞资源、图片优化以及 SSR 预渲染可有效改善。
LCP 的判定元素有哪些？如何通过 Performance 面板定位 LCP 瓶颈？Web Vitals API 如何获取实时指标？
📌 面试问题 2：SSR、SSG、预渲染三者的区别是什么？Vue 项目中如何选择？
是否理解三种渲染方案的核心差异；能否根据业务场景（内容动态性、数据实时性、SEO 需求）做出合理选型；是否了解 Nuxt.js / Vite 等框架的支持情况。
- 定义差异：SSR 服务端实时渲染；SSG 构建时生成静态页；预渲染为指定路由生成静态快照。
- 适用场景：SSR 适合动态内容/强实时性；SSG 适合内容型/博客/营销页；预渲染适合少量静态路由优化。
- Vue 技术选型：Nuxt.js 同时支持 SSR + SSG；Vite 插件 vite-plugin-ssr 可快速接入。
- 权衡成本：SSR 服务器开销大，SSG 构建时长随页面数增长，预渲染灵活但覆盖有限。
SSR 服务端实时渲染适合动态内容；SSG 构建时生成静态页适合内容型站点；预渲染为特定路由生成快照。Vue 项目使用 Nuxt.js 可同时支持 SSR 和 SSG。选型依据：内容动态性、数据实时性及 SEO 需求。
Nuxt.js 的 SSR 模式下如何处理客户端水合？SSG 构建后如何实现增量更新？预渲染对动态路由如何处理？
📌 面试问题 3：线上 Vue 应用首屏白屏时间超过 3 秒，你如何分析和优化？
是否具备系统化性能诊断思维；能否按「测量 → 定位 → 优化 → 验证」链路推进；是否掌握具体分析工具和优化技术。
- 量化现状：通过 Lighthouse 和 Performance 面板测量 FP / FCP / LCP 及资源瀑布图。
- 定位瓶颈：查看首屏 JS Bundle 体积、未懒加载的路由、阻塞的三方脚本、大图资源。
- 实施优化：路由懒加载分割 chunk，关键 CSS 内联，图片转 WebP 并懒加载，延迟三方脚本。
- 验证效果：再次运行 Lighthouse，对比优化前后指标，观察白屏时间变化。
先用 Lighthouse 锁定 FP/FCP 偏高的根因，发现首屏 JS bundle 达 1.2MB 且未做懒加载。随后实施路由懒加载将 chunk 降至 320KB，内联关键 CSS，图片转为 WebP 格式。优化后 FCP 从 2.8s 降至 1.6s，白屏时间缩短 43%。
如何区分是网络瓶颈还是渲染瓶颈？webpack-bundle-analyzer 如何辅助定位？首屏 SSR 和预渲染哪个更适合你这个场景？
📁 项目案例：跨境出口电商平台首屏加载优化
| 维度 | 内容 |
|---|---|
| 项目名称 | ShopGlobal 电商平台首屏性能优化 |
| 业务背景 | 面向欧美市场，首屏加载慢导致用户跳出率高达 45%，SEO 排名持续下滑 |
| 规模指标 | 月活 500 万+；首屏加载时间 4.8s；LCP 5.2s；白屏时间 2.3s |
| 技术栈 | Vue 2 + Vuex + Vue Router + Webpack 4 + Nginx + CDN（CloudFront） |
| 核心难点 |
|
| 面试高频追问 |
|
| 可迁移回答话术 | 在该电商平台优化中，我首先通过 Lighthouse 和 webpack-bundle-analyzer 定位到首屏 JS bundle 达 1.2MB 是核心瓶颈。随后实施路由懒加载将主 chunk 降至 320KB，按需加载多语言包，内联关键 CSS，图片转为 WebP 并延迟加载三方脚本。最终首屏加载从 4.8s 降至 2.1s，LCP 从 5.2s 降至 2.8s，跳出率下降 32%。核心经验：先诊断再优化，用数据驱动决策。 |