Web前端渐进增强与优雅降级是什么？

今天小编要跟大家分享的文章是关于参加Web前端的常见题渐进增强与优雅降级。准备参加Web前端工作的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。

渐进增强与优雅降级

渐进增强并不是一种技术，而是一种设计思想。各个浏览器的渲染能力各不相同，要做一个每个人都能看到的网页、感受到的体验都一致的网站几乎不可能。但还是得网站的可访问性，增加用户在任何环境下都能正常访问网页得核心内容或能使用基本功能(避免网页打不开、排版错误等)，并为他们提供当前条件下较好的体验，这就是渐进增强得核心思想。

优雅降级也是一种设计思想，为了增加在高版本浏览器中提供较好的体验，碰到低版本浏览器再降级进行兼容处理，使其能正常浏览。

这两种思想的区别在于：

1. 渐进增强是向上兼容，优雅降级是向下兼容;

2. 渐进增强是从简单到复杂，优雅降级是从复杂到简单;

3. 渐进增强关注的是内容(增加核心内容)，优雅降级关注的是浏览体验(为了兼容低版本浏览器)

2. DOCTYPE

作用

DTD(Document Type Definition，文档类型定义)是一系列的语法规则，用来定义 XML 或 (X)HTML 的文档类型。浏览器会使用它来判断文档类型，决定何种协议来解析，以及切换浏览模式。

DOCTYPE 是用来声明文档类型和 DTD 规范的，一个主要的用途便是文件的合法性验证。如果文档代码不合法，那么浏览器解析时便会出现一些差错。

HTML5的文档类型声明：

HTML 4.01 Strict(HTML 4.01 严格模式)的 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(如font)，它的文档类型声明：

标准模式与怪异模式

怪异模式(Quirks Mode)用于模拟旧浏览器的行为。早期的网站并不会遵循完整的规范，随着浏览器支持越来越多的规范，在那些旧的浏览器中开发的页面在显示时会被破坏。为了向后兼容，浏览器发明了怪异模式，一行错误或无效的 DOCTYPE 都会触发怪异模式。

浏览器使用文件开头的 DOCTYPE 来决定用怪异模式处理或标准模式处理。DOCTYPE 可以确保不同浏览器以相同的方式解析文档，以及执行相同的渲染模式。

怪异模式与标准模式的主要区别：

1. 怪异模式的宽度和高度会包含 padding 和 border。标准模式不包含，标准模式下可以通过设置 box-sizing: border-box 将标准盒模型转化成怪异模式下的盒模型。

2. 怪异模式下，当内容超出容器高度时，会将容器拉伸，而不是溢出。

3. 怪异模式下，在表格中的字体样式(如 font-size )不会继承。

4. 怪异模式下颜色值必须使用十六进制标记法。