# 精簡版
***
**漸進增強 progressive enhancement**:針對低版本瀏覽器進行構建頁面,保證最基本的功能,然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
**優雅降級 graceful degradation**:一開始就構建完整的功能,然后再針對低版本瀏覽器進行兼容。
區別:
  a. 優雅降級是從復雜的現狀開始,并試圖減少用戶體驗的供給
  b. 漸進增強則是從一個非常基礎的,能夠起作用的版本開始,并不斷擴充,以適應未來環境的需要
  c. 降級(功能衰減)意味著往回看;而漸進增強則意味著朝前看,同時保證其根基處于安全地帶
# 詳細版
***
[前端開發之優雅降級與漸進增強](https://www.cnblogs.com/web-wjg/p/7240985.html)
## 名詞解釋
  * **漸進增強(Progressive Enhancement)**:一開始就針對低版本瀏覽器進行構建頁面,完成基本的功能,然后再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
  * **優雅降級(Graceful Degradation)**:一開始就構建站點的完整功能,然后針對瀏覽器測試和修復。比如一開始使用 CSS3 的特性構建了一個應用,然后逐步針對各大瀏覽器進行 hack 使其可以在低版本瀏覽器上正常瀏覽。
  其實漸進增強和優雅降級并非什么新概念,只是舊的概念換了一個新的說法。在傳統軟件開發中,經常會提到**向上兼容**和**向下兼容**的概念。漸進增強相當于向上兼容,而優雅降級相當于向下兼容。向下兼容指的是高版本支持低版本的或者說后期開發的版本支持和兼容早期開發的版本,向上兼容的很少。大多數軟件都是向下兼容的,比如說Office2010能打開Office2007,Office2006,Office2005,Office2003等建的word文件,但是用Office2003就不能打開用Office2007,Office2010等建的word文件!
## 二者區別
  * **優雅降級和漸進增強只是看待同種事物的兩種觀點**。優雅降級和漸進增強都關注于同一網站在不同設備里不同瀏覽器下的表現程度。關鍵的區別則在于它們各自關注于何處,以及這種關注如何影響工作的流程。
  * **優雅降級**觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段,并把測試對象限定為主流瀏覽器(如 IE、Mozilla 等)的前一個版本。在這種設計范例下,舊版的瀏覽器被認為僅能提供“簡陋卻無妨 (poor, but passable)” 的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點,因此除了修復較大的錯誤之外,其它的差異將被直接忽略。
**漸進增強**觀點則認為應關注于內容本身。
## 案例分析
看如下這兩段代碼的書寫順序,表示了我們開發的著重點。
~~~
.transition { /*漸進增強寫法*/
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.transition { /*優雅降級寫法*/
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
}
~~~
前綴CSS3(-webkit-*/ -moz-*/ -o-\*)和正常CSS3在瀏覽器中的支持情況是這樣的:
  1. **很久以前**:瀏覽器前綴CSS3和正常CSS3**都不支持**;
  2. **不久之前**:瀏覽器**只支持**前綴CSS3,**不支持**正常CSS3;
  3. **現在**:瀏覽器**既支持**前綴CSS3,**又支持**正常CSS3;
  4. **未來**:瀏覽器**不支持**前綴CSS3,**僅支持**正常CSS3.
  漸進增強的寫法,優先考慮老版本瀏覽器的可用性,最后才考慮新版本的可用性。在時期3前綴CSS3和正常CSS3都可用的情況下,正常CSS3會覆蓋前綴CSS3。優雅降級的寫法,優先考慮新版本瀏覽器的可用性,最后才考慮老版本的可用性。在時期3前綴CSS3和正常CSS3都可用的情況下,前綴CSS3會覆蓋正常的CSS3。
  就CSS3這種例子而言,我更加推崇漸進增強的寫法。因為前綴CSS3的某些屬性在瀏覽器中的實現效果有可能與正常的CSS3實現效果不太一樣,所以最終還是得以正常CSS3為準。如果你好奇究竟是什么屬性在前綴CSS3和正常CSS3中顯式效果不一樣,可以看看這篇文章《[需警惕CSS3屬性的書寫順序](http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/)》。
## 如何抉擇
  如果軟件開發的預算和時間充足,就不存在抉擇的問題。然而現實很殘酷,要么開發周期短,要么開發預算少,或者二者兼而有之,這個時候該如何抉擇?就我個人而言,講講我的觀點。
  應**根據你的用戶所使用的客戶端的版本來做決定**。請注意我的措辭,我沒有用瀏覽器,而是用客戶端。因為漸進增強和優雅降級的概念本質上是軟件開發過程中低版本軟件與高版本軟件面對新功能的兼容抉擇問題。服務端程序很少存在這種問題,因為開發者可以控制服務端運行程序的版本,就無所謂漸進增強和優雅降級的問題。但是客戶端程序則不是開發者所能控制的(你總不能強制用戶去升級它們的瀏覽器吧)。我們所謂的客戶端,可以指瀏覽器,移動終端設備(如:手機,平板電腦,智能手表等)以及它們對應的應用程序(瀏覽器對應的是網站,移動終端設備對應的是相應的APP)。
  現在有很成熟的技術,能夠讓你分析使用你客戶端程序的版本比例。如果低版本用戶居多,當然優先采用漸進增強的開發流程;如果高版本用戶居多,為了提高大多數用戶的使用體驗,那當然優先采用優雅降級的開發流程。
  然而事實情況是怎么樣的呢?絕大多數的大公司都是采用漸進增強的方式,因為業務優先,提升用戶體驗永遠不會排在最前面。例如:新浪微博網站前端的更新,擁有這種億級用戶的網站,絕對不可能追求某個特效而不考慮低版本用戶可不可用,一定是確保低版本到高版本的可訪問性,再去漸進增強,采用新功能給高版本用戶提供更好的用戶體驗。但也不是沒有反例。如果你開發的是一款面向青少年的軟件(或網站),你知道這個群體的人總是喜歡嘗試新事物,總是喜歡酷炫的特效,總是喜歡把它們的軟件更新到最新版本(而不像我們老一輩的用戶)。面對這種情況,漸進增強的開發流程實為上選。
  * **軟件開發中,從來就[沒有銀彈](https://en.wikipedia.org/wiki/No_Silver_Bullet)。具體的抉擇,請讀者視情況而定**
- 前言
- 前端概念
- 優雅降級和漸進增強
- XSS攻擊與CSRF攻擊
- MVC / MVP / MVVM
- 內存泄漏
- HTML
- 基礎
- Title 和 Alt 有什么區別?
- 語義化
- iFrame有那些優缺點?
- 全局屬性有哪些?
- <style>寫在<body>前和<body>后有什么區別?
- 瀏覽器相關
- 如何讓Chrome瀏覽器顯示小于12px的文字?
- 瀏覽器是如何渲染頁面的
- 瀏覽器內核
- WEB標準 & W3C標準
- 嚴格模式 & 混雜模式
- 常見元素/標簽
- 渲染機制及重繪和回流
- 其他
- HTML5 為什么只寫<!DOCTYPE HTML> ?
- link 和 @import 有什么區別?
- HTML 5
- 常見瀏覽器兼容問題
- CSS
- 基礎
- px、em、rem、vw、vh 的區別
- src 和 href 的區別
- Css Hack 是什么?
- 圖像優化
- 定位方式有哪些?
- 居中方式有哪些?
- 偽元素和偽類
- ::before 和 :after 中雙冒號和單冒號有什么區別?
- 常用選擇器
- 選擇器優先級
- 用純CSS創建一個三角形
- 初始化CSS樣式
- BFC規范(塊級格式化上下文)
- 上下margin重合
- 全屏滾動的原理是什么?
- box-sizing
- 文本超出隱藏
- 盒模型
- 什么是盒模型?
- 響應式布局
- 媒體查詢
- 浮動與清除浮動
- CSS 3
- CSS3 animation 渲染優化
- Canvas
- FlexBox 彈性盒布局模型
- 新特性
- 常見布局方式有哪些?
- 預處理器 less & sass
- JavaScript
- 同步和異步
- async & await
- Promise
- Promise.all
- Promise.race
- Promise.finally
- 添加、移除、復制、創建、和查找節點
- 數組去重
- 數據類型
- 如何判斷數據類型?
- 數據類型轉變
- == 和 ===的區別
- 原型 與 原型鏈
- 事件
- 事件委托
- 冒泡 與 捕獲
- 如何阻止默認事件?
- 函數
- 箭頭函數是什么?
- 閉包
- 遞歸
- Ajax
- Ajax 是什么?
- 手寫一個 Ajax
- HTTP 常見狀態碼
- 一次完整的 HTTP 事務是怎么一個過程
- HTTP 和 HTTPS 有什么區別?
- HTTP協議 和 TCP協議 有什么區別?
- 跨域及常見解決辦法
- RESTful 協議
- Xml 和 Json的區別
- Json對象 與 JS對象 轉換
- This 指向
- 變量與常量
- 什么是變量提升?
- 正則表達式
- 性能優化(基礎篇)
- 前端本地存儲
- 刷新頁面,js請求一般會有哪些地方有緩存處理
- 如何實現頁面每次打開時清除本頁緩存?
- Cookies & SessionStorage & LocalStorage
- 防抖和節流
- 垃圾回收機制
- 前端加密
- SEO 與 服務端渲染
- 模塊化
- AMD、CMD、CommonJs
- Import / Export
- 面向對象
- 深拷貝和淺拷貝
- Vue
- Vue 常見面試題
- Vue 優缺點?
- 響應式原理?
- 組件如何傳參?
- 前端三大框架區別
- 單頁面應用和多頁面應用區別及優缺點
- 常用指令有哪些?
- v-if 和 v-for 的優先級
- 生命周期
- 路由
- Cli 工程化
- Axios
- VueX
- VueX 是什么?
- 怎么用?
- 使用場景
- 常見問題
- Vue 性能優化
- WebPack 性能優化
- Virtual DOM(虛擬Dom)
- ES6
- ES6 新特性有哪些?
- TypeScript
- React
- 微信小程序
- 常見Bug
- 支付
- 支付寶小程序
- 后臺集成方案
- 前端鑒權
- HTTP基本認證
- session-cookie
- Token
- OAuth
- 目錄結構
- WebPack
- EsLint
- 前后端交互
- 多環境部署
- Axios封裝
- 項目經驗
- 項目開發流程
- 支付
- 支付寶支付
- 余額支付/積分支付
- WX 支付
- 常用庫
- jQuery
- Loadsh