前端首屏加载优化
脱离八股、工程可落地、面试能加分的首屏优化方案，覆盖预加载、关键资源、延迟策略、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 --- 高优加载首屏必需资源
html
<link rel="preload" href="core.js" as="script">
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>prefetch --- 低优预加载未来可能用到的资源
不阻塞当前渲染，空闲时加载下一跳页面资源。
preconnect --- 提前建立域名连接
减少 DNS / TLS 握手耗时：
html
<link rel="preconnect" href="https://cdn.example.com">fetchpriority --- 指定关键资源优先级
html
<img src="poster.jpg" fetchpriority="high">二、关键 CSS（消除渲染阻塞）
核心思路： 首屏样式内联，非关键样式异步加载。
工程化提取
| 构建工具 | 方案 |
|---|---|
| Webpack | mini-css-extract-plugin + critical-css-webpack-plugin |
| Vite | vite-plugin-critical |
| 通用工具 | Critical、Penthouse 自动提取首屏 CSS |
写法
html
<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 |
加载完立即执行 | 否 | 独立脚本、无依赖 |
最佳实践
javascript
核心业务 → 内联或高优加载
统计/广告 → async
组件库/路由 → 动态 import + 代码分割
js
const Chart = React.lazy(() => import('./Chart'));五、预渲染（SPA 首屏神器）
适用： 静态路由、无大量动态数据。
| 构建工具 | 方案 |
|---|---|
| Webpack | prerender-spa-plugin |
构建时生成完整 HTML，直接吐出首屏内容：
js
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 |
九、话术
markdown
1. 关键路径优化：内联关键 CSS、预加载核心资源、图片/字体极致压缩
2. 加载策略分层：同步 / 异步 / 懒加载 / 预加载
3. 框架层：SPA → 预渲染，大型应用 → SSR / SSG
4. 工程 + 服务：压缩、缓存、CDN、Server Push
5. 量化监控，持续迭代