前端首屏加载优化
脱离八股、工程可落地、面试能加分的首屏优化方案，覆盖预加载、关键资源、延迟策略、SSR/SSG、工程化等核心要点。
方案总览
| 策略 |
手段 |
收益 |
| 预加载 |
preload / prefetch / preconnect / fetchpriority |
精准提速关键资源 |
| 关键 CSS |
首屏样式内联，非关键异步 |
消除渲染阻塞 |
| 图片/字体 |
懒加载 + 现代格式 + font-display |
减少首屏下载量 |
| JS 延迟 |
defer / async / 动态 import |
根治脚本阻塞 |
| 预渲染 |
prerender-spa-plugin |
SPA 首屏秒开 |
| SSR/SSG |
Next.js / Nuxt.js |
SEO 友好、首屏极快 |
| 服务端 |
Gzip/Brotli、CDN、缓存 |
传输层提速 |
| 工程化 |
代码分割 + Bundle 分析 + 监控 |
持续优化闭环 |
一、预加载（精准提速）
preload --- 高优加载首屏必需资源
<link rel="preload" href="core.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
prefetch --- 低优预加载未来可能用到的资源
不阻塞当前渲染，空闲时加载下一跳页面资源。
preconnect --- 提前建立域名连接
减少 DNS / TLS 握手耗时：
<link rel="preconnect" href="https://cdn.example.com">
fetchpriority --- 指定关键资源优先级
<img src="poster.jpg" fetchpriority="high">
二、关键 CSS（消除渲染阻塞）
核心思路： 首屏样式内联，非关键样式异步加载。
工程化提取
| 构建工具 |
方案 |
| Webpack |
mini-css-extract-plugin + critical-css-webpack-plugin |
| Vite |
vite-plugin-critical |
| 通用工具 |
Critical、Penthouse 自动提取首屏 CSS |
写法
<style>/* 内联首屏关键 CSS */</style>
<link rel="stylesheet" href="all.css" media="print" onload="this.media='all'">
三、图片 / 字体优化
| 措施 |
具体方案 |
| 关键图优先 |
首屏图用 preload + fetchpriority="high" |
| 懒加载 |
非首屏图 loading="lazy" 或 IntersectionObserver |
| 现代格式 |
WebP / AVIF，配合 srcset 响应式尺寸 |
| 字体 |
font-display: swap 避免 FOIT，WOFF2 压缩 |
四、JS 延迟 / 异步（根治阻塞）
| 属性 |
执行时机 |
阻塞渲染 |
适用场景 |
defer |
HTML 解析完、DOMContentLoaded 前 |
否 |
依赖 DOM、需按顺序执行 |
async |
加载完立即执行 |
否 |
独立脚本、无依赖 |
最佳实践
核心业务 → 内联或高优加载
统计/广告 → async
组件库/路由 → 动态 import + 代码分割
const Chart = React.lazy(() => import('./Chart'));
五、预渲染（SPA 首屏神器）
适用： 静态路由、无大量动态数据。
| 构建工具 |
方案 |
| Webpack |
prerender-spa-plugin |
构建时生成完整 HTML，直接吐出首屏内容：
document.dispatchEvent(new Event('render-event'));
六、SSR / SSG（终极方案）
| 方案 |
原理 |
框架 |
| SSR |
服务端直出 HTML，首屏极快、SEO 友好 |
React → Next.js / Vue → Nuxt.js |
| SSG |
构建时生成静态页，访问秒开 |
Next.js / Nuxt / Astro |
加分项： 边缘渲染、流式 SSR、渐进式注水
七、服务端与传输优化
| 措施 |
说明 |
| Gzip / Brotli |
开启压缩，Brotli 比 Gzip 压缩率高 ~20% |
| HTTP/2 Server Push |
推送关键资源，减少往返 |
| CDN |
静态资源就近分发 |
| 缓存 |
强缓存 Cache-Control + 协商缓存 ETag |
八、工程化与监控
| 维度 |
工具 / 指标 |
| 代码分割 |
路由级 / 组件级 / 第三方库拆分 |
| 打包分析 |
Webpack Bundle Analyzer、Rollup Visualizer |
| 性能指标 |
LCP、FCP、TTI、CLS |
| 监控 |
Lighthouse、Web Vitals、Performance API |
九、话术
1. 关键路径优化：内联关键 CSS、预加载核心资源、图片/字体极致压缩
2. 加载策略分层：同步 / 异步 / 懒加载 / 预加载
3. 框架层：SPA → 预渲染，大型应用 → SSR / SSG
4. 工程 + 服务：压缩、缓存、CDN、Server Push
5. 量化监控，持续迭代