渐进增强 && 优雅降级

渐进增强（Progressive Enhancement）和优雅降级（Graceful Degradation）是前端开发中很重要的两个概念，尽管也许你没有听过，但是实际开发中肯定已经接触到了，当然面试也经常会问到。

起因

之所以会出现渐进增强和优雅降级，是因为前端应用运行的载体是浏览器，而浏览器的多样性和差异也导致了同一个页面在不同的浏览器之前会有不一样的运行和显示效果。

这个时候我们就必须要做一个决定：是优先兼容低版本浏览器，还是为了酷炫直接从高版本浏览器入手，从而引申出了本期的这两个概念。

对象

网上很多文章会让大家产生一种错觉：这是 CSS 独有的概念。其实并非如此，HTML、JavaScript、CSS 都存在渐进增强和优雅降级，新的 CSS 样式，新的 JavaScript 函数、新的 HTML 标签都会在新旧浏览器上面产生不同的效果。

渐进增强

从低版本浏览器入手，实现基本的功能，然后再针对高版本浏览器进行体验优化，新增一些高级效果。举个最简单的例子，比如我们有一个卡片

<div class="card"></div>

一开始就只给宽高和背景色，所有浏览器都能正确显示。但是毕竟不太好看，我们会想，低版本浏览器就这样足够了，而如果是高版本浏览器，其实是可以添加一些 CSS3 的样式使其显示得更好看

.card {
  box-shadow: 0px 0px 10px #DDD;
  border-radius: 5px;
}

本质上就是，先解决温饱，再谋求发展，起到了锦上添花的作用。

优雅降级

从高版本浏览器入手，构建完整的效果和功能，后针对低版本浏览器进行测试兼容和修复。当然并非是让低版本浏览器呈现出和高版本浏览器相同的效果，主要是解决一些会影响功能的问题。

按照上面的示例，一开始我们就会给卡片加上圆角和阴影，在高版本浏览器上面看效果，然后再到低版本浏览器上面一看，虽然没那么好看，但内容也都正常显示了，没什么大问题。

所以我们会发现，渐进增强和优雅降级最终的结果可能是一致的，但是关注点和过程是不一样的。

选择

选择的依据其实就是目标用户的设备和浏览器版本。在常规的项目中，渐进增强是更合理的方案，毕竟内容和业务才是核心，优先需要确保应用能够正常工作。少数情况下，如果你的应用是给一群使用新设备的人群开发的，那么你可以采用优雅降级。

前端很多概念听上去很高大上，但只要稍加思考和总结，就能很好地理解和运用，反过来指导我们的开发实践