前端面试题之优雅降级和渐进增强

背景

渐进增强和优雅降级这两个概念是在 CSS3 出现之后火起来的。由于低级浏览器不支持 CSS3，但是 CSS3 特效太优秀不忍放弃，所以在高级浏览器中使用CSS3，而在低级浏览器只保证最基本的功能。二者的目的都是关注不同浏览器下的不同体验，但是它们侧重点不同，所以导致了工作流程上的不同。

概念

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

（Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了，为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效。）

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

（从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，向页面添加无害于基础浏览器的额外样式和功能。当浏览器支持时，它们会自动地呈现出来并发挥作用。）

区别

• 开发重点不同

 /* 优雅降级 */
.transition{ 
	　　     transition: all .5s;
	　　  -o-transition: all .5s;
	  　-moz-transition: all .5s;
	 -webkit-transition: all .5s;
}
 /* 渐进增强 */
.transition{
	-webkit-transition: all .5s;
	   -moz-transition: all .5s;
	     -o-transition: all .5s;
	        transition: all .5s;   
    }

通过两段代码的书写顺序，可以看出渐进增强和优雅降级开发的重点不同。优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的、能够起作用的版本开始，并不断扩充，以适应未来环境的需要。

• 观点不同

渐进增强观点：认为应该关注于内容本身。内容是我们建立网站的诱因，有的网站展示它，有的则收集它，有的寻求、有的操作，还有的网站甚至包含以上的种种，但相同点是他们全都涉及到内容，这使得“渐进增强”成为一种更为合理的设计范例。

这也是它立即被Yahoo!所采纳并用以构建其“分级式浏览器支持（Graded Browser Support)“策略的原因所在。

优雅降级的观点：应针对最高级、最完善的浏览器来开发网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨（poor,but passable)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

如何选择

若低版本用户居多，则优先采用渐进增强的开发流程；若高版本用户居多，则为了提高大多数用户的使用体验，那当然优先采用优雅降级的开发流程。

多数大公司采用渐进增强的方式：业务优先，提升用户体验永远不会排在最前面。
例如：新浪微博这种拥有亿级用户的网站，绝对不可能为了追求某个特效而不考虑低版本用户，一定是确保低版本、高版本都可用的情况下，再去渐进增强，采用新功能给高版本用户提供更好的用户体验