渐进式增强与优雅降级

0. 引言

渐进式增强与优雅降级是两种相辅相成的网页设计理念：前者强调从基础功能出发逐步增强，后者保证高级特性失效时核心功能仍然可用。本文介绍这两种理念的含义、优势，并结合 Amazon 的实际案例帮助理解。

1. 渐进式增强

渐进式增强（Progressive Enhancement）强调的是可访问性：允许不同能力的设备都能访问网页的基本内容、使用网页的基本功能；而当用户使用更先进的设备时，能够带来更强大的功能和更好的体验。

渐进式增强的理念不仅对不同设备的访问带来普适性、对低端设备更友好，还有其他优势：立足于网页基础的 HTML，可以让网页对搜索引擎更加友好，因为 CSS 样式和 JavaScript 行为不一定能被搜索引擎解释执行并收录。

在这个过程中，HTML 的语义化变得越来越重要。语义化就是让 HTML 页面体现出内容的结构性，让 HTML 具备自解释能力，而不是一堆缺乏语义的标签。例如：

<article>
  <h1>Article Title</h1>
  <p>This is the content. Please read <em>carefully</em>.</p>
</article>

其中 article 标签表示其内容是一篇文章，虽然可以用无语义的 div 代替，但 article 能让阅读代码的人、浏览器以及搜索引擎理解这部分内容。h1 表示标题，p 表示段落，em 表示强调（无语义替代是斜体标签 i），这些标签都用在了恰当的位置。

2. 优雅降级

和渐进式增强一起谈论的，还有一个相反过程的设计理念——优雅降级（Graceful Degradation），本质上它们说的是一个事儿。

优雅降级指的是：当高级特性和增强内容无法在用户的设备上展现时，依然能够给用户提供一个具备基本功能、可以工作的应用版本。

值得注意的是，优雅降级并非一定发生在用户设备能力不匹配时，还可能发生在服务器端资源出现瓶颈的时候。比如某些访问量特别大或系统出现问题的时刻，资源紧张，服务端可以关闭一些次要功能，降低部分用户体验，用核心资源保证基础功能的正常运行。

虽然实现路径相反，但二者的目标一致：让应用在尽可能多的环境下保持可用。

3. 案例：Amazon 的设计

以 Amazon 网站为例：使用先进浏览器访问时可以看到完整功能，点击左上角三横线的菜单图标，能利用 JavaScript 做出弹出层效果。

如果在 Chrome 中通过 Site Settings 关闭对网站的 JavaScript 支持，刷新页面后显示差别不大——但点击左上角的菜单图标，由于没有 JavaScript，无法使用弹出层效果，它变成了一个链接，直接跳转到商品分类页面。

你看，虽然没有了 JavaScript，遵循这种设计理念，在损失一部分用户体验的情况下，用户依然可以继续使用网站、继续购物，核心功能并没有丢失。

4. 小结

渐进式增强从基础功能出发、逐级叠加高级能力，优雅降级则在高级能力缺失时退回到基础功能，二者殊途同归，都服务于"核心功能始终可用"这一目标。实践中，语义化 HTML 是渐进式增强的基石，合理的降级设计则是优雅降级的保障。这也是全栈工程师在构建 Web 应用时应当内化的设计理念。

下一章我们将聊聊全栈工程师的能力模型——技术栈全景、前后端协作与职业发展路径。