渐进增强 和 优雅降级 之间的不同

渐进增强 progressive enhancement:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

(一开始保证最基本的功能,再改进和追加功能)

优雅降级 graceful degradation:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

(一开始就构建完整的功能,再针对低版本浏览器进行兼容。)

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。

补充

补充:两种思路现在都在用,渐进增强更适合做"内容站",优雅降级更适合做"功能站"。

怎么选

  • 新项目、面向未来:推荐渐进增强。先把 HTML 结构做对,再用 CSS/JS 增量增强体验
  • 老项目、要兼容旧浏览器:推荐优雅降级。先让现代浏览器跑满,再写 polyfill / 兜底逻辑
  • 现代工程里往往两者结合:HTML/CSS 保证最低可用,JS 按能力加载

一句话区分

  • 渐进增强:先做"能用",再做"好用"
  • 优雅降级:先做"好用",再补"能用"

来源整理自:我的有道云笔记