当我们通过 URI 访问的页面 时。页面中会关联 CSS、JavaScript 等所需的资源，并包含其他页面的链接。浏览器会下载对应的 CSS、JavaScript，完成界面的渲染。同时，也可以通过页面中的链接，去访问其他关联的页面。
核心原则
- 内容层 (Semantic HTML): 这是应用的基石。所有核心内容和基础功能都必须通过结构良好、语义化的 HTML 来承载。使用如
<nav>,<main>,<article>,<button>等语义化标签，不仅能让内容在没有样式和脚本的情况下依然清晰可读、功能可用，更是确保了应用对搜索引擎爬虫和屏幕阅读器等辅助技术的原生可访问性。这一层是普适性的保证，是渐进增强理念的出发点。 - 样式层 (CSS): 在坚实的内容层之上，通过外部链接的层叠样式表（CSS）来添加视觉表现和布局。这种关注点分离的实践确保了，如果用户的浏览器支持 CSS，他们将看到一个经过精心设计的界面；如果 CSS 加载失败或不被支持，用户依然能够访问和使用未经样式化的核心内容，而不会导致整个应用崩溃。
- 行为层 (Unobtrusive JavaScript): 这是最顶层的增强。通过外部链接的、非侵入式的 JavaScript 为应用注入丰富的交互性和高级功能。这里的关键是“非侵入式”（Unobtrusive），意味着 JavaScript 应该作为一种增强手段，而不是访问核心内容的先决条件。即使用户禁用了 JavaScript，或者脚本因网络问题加载失败，应用的基础功能（如链接跳转、表单提交）必须依然可用 。
增强性能表现
- 最大内容绘制 (Largest Contentful Paint, LCP)； LCP 衡量的是页面主要内容的加载速度。渐进增强的“内容优先”原则，特别是与服务器端渲染（SSR）结合时，意味着有意义的 HTML 内容会被优先发送到浏览器。浏览器可以立即开始解析和渲染这些内容，而无需等待庞大的 JavaScript 包下载和执行，这直接且显著地改善了 LCP 指标。
- 与下一次绘制的交互 (Interaction to Next Paint, INP)：INP 衡量的是页面的响应速度。通过最大限度地减少初始加载的 JavaScript 体积，渐进增强减少了主线程被长时间阻塞的风险。这意味着页面能够更快地达到可交互状态（Time to Interactive, TTI），从而带来更低的 INP 分数。用户可以立即与页面上的核心 HTML 元素（如链接和表单控件）进行交互，即使负责增强体验的脚本仍在后台加载中。
- 累积布局偏移 (Cumulative Layout Shift, CLS)：CLS 衡量的是页面的视觉稳定性。渐进增强鼓励在 HTML 中定义结构，在 CSS 中定义样式和布局。这种实践使得浏览器能够在内容（尤其是图片和广告）加载完成前为其预留空间，从而有效防止因内容动态加载而导致的页面元素跳动，这种跳动是导致 CLS 分数不佳的主要原因。
提升网站可发现性（SEO）
- 可爬取性与可索引性：纯客户端渲染应用的一个主要 SEO 痛点是，其核心内容往往需要执行 JavaScript 才能生成。这给爬虫带来了巨大的挑战，可能导致索引不全或延迟。渐进增强通过确保所有关键内容都存在于初始的 HTML 文档中，从根本上解决了这个问题。爬虫可以轻松地抓取和索引一个完整的、有意义的页面，而不会遇到任何障碍。
- 语义信号：渐进增强对语义化 HTML 的强调，为搜索引擎提供了关于页面内容结构和含义的丰富信号。正确使用标题标签 (
<h1>-<h6>)、段落、列表和链接，有助于搜索引擎更好地理解页面主题和重要性，从而可能带来更好的搜索排名。
| 技术/框架 | 核心实现方式 | 应用场景示例 | 性能优化效果 |
|---|---|---|---|
| React | 使用 React.lazy和Suspense实 现懒加载,延迟加载非关键组件 | 电商网站的商品详情页，仅在用户滚动时 加载图片 | 减少初始加载时间，提升首屏渲染速度, 改善TTI(Time to Interactive) |
| Angular | 利用路由模块的loadChildren属 性实现按需加载功能模块 | 复杂仪表盘应用，优先加载 核心指标 | 显著降低初始包大小，提高低性能设备上的流畅性 |
| Vue | 借助defineAsyncComponent定 义异步组件，并结合懒水合策略 | 移动端表单页面，仅在用户交互时激活组件 | 提升移动端体验，减少资源消耗，确保基础功能可用 |
| Next.js | 内置动态导入和图像优化功能，支 持SSR和SSG | 新闻门户网站，优先加载 头条新闻 | 加快SEO抓取速度，提升内容可见性，同时保持良好的用户体验 |
| Nuxt | 引入 Form Actions Module 进行表单 操作增强,支持渐进式渲染 | 登录表单，无需JavaScript也可完成基本提交 | 确保核心功能跨浏览器兼容，优化开发流程 |
一个案例：一个新闻类 PWA 应用
- 所有文章内容以 HTML 形式提供（基础层）
- 使用 Service Worker 缓存首页和常用文章（缓存优先）
- 图片、视频、评论组件懒加载（增强层）
- 用户阅读记录保存在 IndexedDB 中（本地状态） 缓存策略：
| 资源类型 | 缓存方式 | 是否渐进增强 |
|---|---|---|
| HTML 页面 | HTTP 缓存 + SW 缓存 | ✅ 是（基础内容） |
| CSS 样式 | 强缓存 | ✅ 是（表现增强） |
| JS 脚本 | 按需加载 + SW 缓存 | ✅ 是（交互增强） |
| 图片/视频 | 懒加载 + SW 缓存 | ✅ 是（媒体增强） |
| 用户状态 | IndexedDB | ✅ 是（个性化增强） |
| 用户体验： |
- 第一次访问：完整加载所有资源，SW 注册并缓存。
- 后续访问：即使离线，用户也能看到首页和已缓存的文章。
- 有网络时：自动更新内容，加载增强功能（如评论、分享按钮）。
渐进增强和缓存优势
| 优势 | 描述 |
|---|---|
| 🚀 提升首屏性能 | 基础内容优先加载，不依赖复杂逻辑 |
| 🔌 离线可用性 | 即使断网，核心功能仍可使用 |
| 💪 更好地应对弱网环境 | 缓存减少请求次数，增强体验更流畅 |
| 🧱 松耦合架构 | 不同层级可独立更新、缓存、维护 |
| 🧠 提升 SEO | HTML 内容优先加载，利于搜索引擎抓取 |
| 🔐 安全性增强 | 缓存策略限制不必要的外部请求，降低攻击面 |