核心定义#

渐进式渲染是一种分块输出页面内容的技术：

1. 服务器优先发送核心 HTML/CSS
2. 逐步加载次要内容（图片/脚本等）
3. 尽早显示可视内容提升感知速度
4. 后台继续加载剩余资源 核心目标：优化首次内容渲染（FCP）和最大内容绘制（LCP）指标，提升用户体验。

工作原理#

1. 首屏优先：服务器立即返回基础 HTML 框架
2. 占位加载：非关键区域用骨架屏/占位符
3. 流式传输：分块发送 HTML（HTTP/2+ 支持）
4. 渐进增强：
   • 优先加载可见区内容
   • 延迟加载非关键资源
5. 交互优化：异步加载脚本避免阻塞渲染

flowchart TD 
	A[用户请求页面] --> B[服务器返回基础HTML框架] 
	B --> C[浏览器渲染首屏内容] 
	C --> D{剩余资源加载} 
	D -->|高优先级| E[加载首屏图片/字体] 
	D -->|低优先级| F[延迟加载脚本/非可见区内容] 
	E & F --> G[页面完全交互]

常见误区#

1. 过度分块：过多占位符导致布局抖动（CLS 上升）
2. 阻塞渲染：首屏包含同步脚本阻塞 DOM 构建
3. 资源竞争：未优先级排序导致关键资源延迟
4. SEO 忽略：动态内容未考虑爬虫渲染
5. 指标误判：仅优化加载时间忽略交互就绪时间

应用场景#

关联知识#

1. 核心 Web 指标：
   • FCP（首次内容渲染）
   • LCP（最大内容绘制）
   • CLS（累计布局偏移）
   • TTI（可交互时间）
2. 懒加载技术：
   • 图片：<img loading="lazy">
   • 组件：React.lazy() / Vue 异步组件
   • 脚本：<script defer>
3. 资源优先级：
   • preload（关键资源）
   • prefetch（未来可能资源）
   • preconnect（提前 DNS/TLS）
4. 现代框架支持：
   • React: Suspense + Concurrent Mode
   • Vue: <Suspense> 组件
   • Next.js/Nuxt.js 自动代码拆分
5. 性能检测工具：
   • Lighthouse
   • WebPageTest
   • Chrome DevTools Performance
6. CDN 边缘计算：Cloudflare Workers/AWS Lambda@Edge 实现动态分块

💡 黄金法则：

1. 首屏 < 1s：核心内容秒开
2. 长任务 < 50ms：避免阻塞主线程
3. CLS < 0.1：减少布局偏移
4. LCP < 2.5s：确保主要内容快速加载 使用 Lighthouse 评分指导优化方向，优先解决红色项！