当我们通过 URI 访问的页面 时。页面中会关联 CSS、JavaScript 等所需的资源，并包含其他页面的链接。浏览器会下载对应的 CSS、JavaScript，完成界面的渲染。同时，也可以通过页面中的链接，去访问其他关联的页面。
在整个过程中，我们不需要考虑 CSS、JavaScript 来自哪里，关联的页面是否来自同一个网站(因为不关心，也因此导致了 XSS 攻击)。从始至终，我们都将这些关联的资源看作是一个完整的资源在消费。这是我们习以为常的场景。
从系统集成的角度上来看待这个过程。网页中对其他资源的引用，实际上表示了对其他服务计算结果的整合。一个典型的例子就是 Google Analytics，虽然它是以 js 的形式出现。但当页面引用到了这个 js 资源时，实际上完成的是对 Google Analytics 服务的整合。
而点击页面中包含的链接时，浏览器会为你请求对应的网站资源，并将计算结果（大概率是另一个页面）在浏览器客户端里展示。这也可以看作是对其他系统的集成。更具体地讲，也就是浏览器客户端通过延迟（Lazy）调用的方式，整合了其他系统提供的服务。
所以无论是 css、js 这样的资源，还是通过超链接引用的其他页面，都是服务端返回的页面中描述的。而客户端则根据服务端提供的描述，选择恰当的时机，访问这些关联的资源，也就是整合其他系统提供的服务。这样的系统集成方式，我们称之为由服务器指导的客户端侧集成（Server-side guided client-side integration）。
由于对于关联资源的访问是由客户端发起的，并不是由服务器端强制的，那么客户端可能出于某些原因（安全、计算资源受限等）选择不去访问某些关联资源。
比如，在智能手机大规模流行之前，偷菜游戏流行之时，大部分手机上的浏览器并不具备运行完整偷菜游戏的逻辑， 那时的做法是，手机浏览器不加载任何复杂的游戏动画，而是只保留文字与基本交互代码，用户通过点击文字来进行操作。
从这样的角度出发，我们就会发现，CSS、JavaScript 或者页面中通过超链接引用的其他页面，都可以看作是对当前页面的增强。比如 CSS 增强了当前页面的视觉效果，js 增强了当前页面的交互，页面中的超链接为页面中的内容提供了额外的信息。
这种按需索取，而不要求消费全部关联的服务。也正是渐进式的消费方式，促使互联网成为了一个异构、松耦合且开放的系统。同时这也正是我们希望自己所构建的系统能够具有的特质。
而它在前端开发领域最主要的应用，就是渐进增强（Progressive Enhancement）。
渐进增强的概念最早由 Steven Champeon 和 Nick Finck 于2003年在South by Southwest会议上提出，并在随后的研究中得到了进一步阐述。Champeon 等人指出，优雅降级(Graceful Degradation)虽然能够应对部分技术限制，但其默认假设用户使用最新浏览器的做法忽视了低性能设备用户的实际需求。相比之下，渐进增强通过将HTML作为信息传递的核心，CSS负责视觉表现，JavaScript提供交互行为，构建了一个分层架构。这种分层设计使得即使在网络条件较差或浏览器版本较低的情况下，用户依然可以获取关键内容。比如，Wikipedia采用渐进增强策略，允许用户通过纯HTML界面访问内容，而无需依赖样式或脚本的支持，从而最大限度地保证了内容的可访问性。这为现代前端框架设计提供了指导方针。
| 技术/框架 | 核心实现方式 | 应用场景示例 | 性能优化效果 |
|---|---|---|---|
| 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 内容优先加载，利于搜索引擎抓取 |
| 🔐 安全性增强 | 缓存策略限制不必要的外部请求，降低攻击面 |