什么是渐进式增强（Progressive Enhancement）？

Question

Accepted Answer

**渐进式增强**是一种构建策略，从一个可靠、功能完整的**基线**（在任何地方都能工作的语义化 HTML）开始，然后*逐层添加* CSS 用于表现和 JavaScript 用于更丰富的交互——这样即使上层失败，核心体验仍然有效。 ## 三个层次 ```text 1. HTML → content + functionality (works with no CSS/JS) 2. CSS → presentation/layout (enhances appearance) 3. JS → interactivity (enhances behavior) ``` ## 一个具体例子：表单 ```html ``` ```js // Layer 3: IF JS is available, enhance it into a live AJAX search form.addEventListener("submit", (e) => { e.preventDefault(); // upgrade to fetch — no reload fetchResults(form.q.value); }); ``` 如果 JavaScript 加载失败（网络不稳定、报错或被阻止），表单仍然**可以工作**，通过原生的提交方式——用户仍然可以搜索。JS 只是*增强*它。 ## 渐进式增强 vs 优雅降级 - **渐进式增强**——从基线开始，*向上*构建。（自下而上。） - **优雅降级**——从功能完整的版本开始，确保它*优雅地*降级。（自上而下。）渐进式增强通常更为稳健，因为基础层保证能够工作。 ## 为什么这很重要它能生成具有韧性、易于访问、高性能的网站：内容在 HTML 中（对 SEO、屏幕阅读器和低速/老旧设备都有利），页面在 JS 加载前/不依赖 JS 也能使用（感知加载更快，即使脚本出错也能工作），增强功能只是锦上添花而非必需。在一个充满多样化设备、网络和故障的时代，在可用的 HTML 核心上构建——而不是假设 JS 总是运行——能让网站对所有人都可用。现代框架通过服务端渲染和