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

开发 前端
优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后再针对低版本浏览器进行兼容。

背景

渐进增强和优雅降级这两个概念是在 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;   
    }

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

优雅降级(Graceful Degradation)原则指的是在开发过程中,先构建网站或应用的基本功能,然后再针对低版本浏览器进行兼容。这样可以确保网站或应用在所有浏览器中都能正常工作,并为那些无法支持最新版本的浏览器提供一个过渡方案,从而不至于完全失效。

相比之下,渐进增强(Progressive Enhancement)原则指的是在开发过程中,逐步增加新的功能和特性,以适应不断变化的市场和用户需求。这种方法可以使网站或应用更加现代化和新颖,从而吸引更多的用户。

优雅降级和渐进增强的区别在于,优雅降级是从复杂的现状开始,尽可能减少用户体验的供给,而渐进增强则是从一个非常基础的、能够起作用的版本开始,不断扩充以适应未来环境的需要。因此,优雅降级更加注重网站或应用的功能和兼容性,而渐进增强更加注重网站或应用的新颖性和现代化。

责任编辑:姜华 来源: 今日头条
相关推荐

2023-06-29 07:48:35

异步加载JavaScript

2018-07-31 11:20:26

2017-11-27 17:09:38

前端Web图像优化

2012-05-08 16:11:14

WEB前端开发面试

2023-06-26 08:24:23

JavaScriptAJAX

2017-08-16 10:03:57

前端面试题算法

2023-05-29 10:38:00

HTML5离线存储

2022-02-09 07:40:42

JavaScript前端面试题

2016-02-23 11:22:20

前端面试小记

2019-02-21 14:12:26

前端面试题Vue

2018-05-10 16:52:03

阿里巴巴前端面试题

2022-07-27 08:27:34

Call前端

2023-05-19 08:21:40

MarginCSS

2020-06-29 15:20:31

前端React Hooks面试题

2020-02-16 12:05:35

javascript前端面试

2020-11-12 10:20:40

前端面试web

2019-01-21 15:00:51

面试前端开发

2021-02-02 06:12:39

JavaScript 前端面试题

2023-08-27 15:57:28

前端开发

2022-01-18 08:16:52

Web 前端JavaScript
点赞
收藏

51CTO技术栈公众号