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

背景

渐进增强和优雅降级这两个概念是在 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)”的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

如何选择

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

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

最后

以上就是鳗鱼短靴为你收集整理的前端面试题之优雅降级和渐进增强的全部内容，希望文章能够帮你解决前端面试题之优雅降级和渐进增强所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。