[譯] 一文教你什麼是漸進加強，爲何它很重要？

• 原文地址：What is Progressive Enhancement, and why it matters
• 原文做者：Praveen Dubey
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：RicardoCao-Biker
• 校對者：weibinzhu, HumesFork

漸進加強（下文簡稱 PE）是一個在開發網頁應用中十分有效的方法。

這裏是正式定義：

漸進加強 使用Web技術以分層的方式，容許全部人訪問網頁的基本內容和功能，使用任何瀏覽器或互聯網鏈接，同時還給更先進的瀏覽器軟件或更大的帶寬提供了這些頁面的一個加強版本。— 維基百科

這個策略的優勢是它容許全部人使用任何瀏覽器和網絡鏈接可以訪問到網頁的基礎內容和功能，也同時爲使用高版本瀏覽器或者高帶寬的用戶提供一個加強版本的網頁。

簡而言之...

...它爲咱們提供了基本的用戶體驗，即便在兼容性不一樣的瀏覽器中也保證了網頁的 穩定運行。

let PE = "Progressive Enhancement";
複製代碼

漸進加強策略由如下幾個 核心原則組成：

• 基本的 網頁內容 應該能被 全部的瀏覽器訪問
• 基本的 網頁功能 應該能在 全部的瀏覽器中運行
• 有限的語義標記包含全部內容
• 加強的網頁佈局由外部引用的 css 提供
• 加強的網頁行爲由外部引用的 JavaScript 提供
• 尊重用戶使用的瀏覽器首選項

因此當你使用下一代只在 合適的環境 下正常工做的 JavaScript/CSS 框架構建你的最新網站時，若是這些代碼離開了特定環境就沒法運行，便不符合漸進加強的策略。

相反，在引入更復雜的代碼前，咱們的開發目標應該是從提供基本功能、穩定的設備兼容性、和無卡頓的體驗開始。

漸進加強案例

讓咱們一塊兒來看看一些漸進加強策略的案例是如何運行的。

網頁字體

網頁字體當然漂亮，可是當用戶網絡環境較差時，加載它們會下降用戶體驗。在這種狀況下，可使用系統字體渲染網頁內容，當環境改變須要加載網頁字體時，也能夠順利切換過去。

有內容總比等待加載網頁字體或什麼也不顯示要好得多。

初始 HTML

網頁負責加載腳本，例如 Angular、React 或其餘框架。當這些腳本負責網頁初始內容渲染時，在低速網絡下或者腳本發生錯誤你的用戶會在瀏覽器或設備中看到空白頁面。

想想，初始加載使用 HTML 渲染老是會比徹底依賴腳原本渲染頁面有更好的用戶體驗，而不是等待腳本加載完成。

功能檢查

好的網站老是會作這個部分，當使用一個可能不會被其餘設備、瀏覽器支持的功能時，老是在 JavaScript 中使用它前確保該功能是在指定瀏覽器中可用的。

Modernizr 是一個受歡迎的功能檢測庫，也許能幫到你。

只在不支持你須要的功能的瀏覽器或設備中引入額外腳本，避免在支持這些功能的瀏覽器中引入額外腳本。

如今，爲什麼選擇漸進加強？

在構建下一個應用程序以前關注漸進加強策略的重要緣由：

堅實的基礎

漸進加強的重點在於，當你處於項目初期，在引入任何複雜的功能前你只使用最基本的 web 技術。這樣在任何的狀況下你都有支持保證更復雜功能運行的基礎。

一旦團隊對網站的核心體驗已經頗有自信，而且在不依賴網速、瀏覽器、設備時也能運行，這時你就能夠開始引入更加複雜的功能和佈局。

穩定性

測試團隊：「 搜索圖標在Safari的offres頁面失效 」

開發團隊：「 在個人電腦上能夠啊，清緩存再試一下，不行就沒辦法了」

測試團隊（來自天堂）：「 仍是不行，你是在 Chrome 上看的吧，Safari 上是不行的」

開發團隊：「 咱們何時開始兼容 Safari了？等等... 修復中...」

if(getBrowsers() == 'safari') {
Patch.magicHelpers.searchIconMagic()
}

Patch.magicHelpers = {
searchIconMagic: function() {
// Can't share magic, doing something } }; 複製代碼

「一個小時後…… 再檢查一下看看」

測試團隊: 「 在 Chrome 和 Safari 中能夠了，可是 Mozilla FireFox 中又不行了... 啊啊啊！」

認可吧，咱們都至少經歷過這種狀況不止一次吧。

項目的穩定性和維護成本也取決於項目是如何開始的。使用框架來配置項目並在後面不停修復可能不是長久之計。

漸進加強策略能夠幫你構建一個更有健壯基礎的項目，你的 HTML、CSS 和 JS 都是能夠支持回退的。他們能夠保證你不會嚴重的依賴瀏覽器的特定功能。

SEO 和可訪問性

每一個人都但願本身的應用被列在搜索引擎列表的第一頁，但這須要咱們提供不懈的努力和計劃來構建如此優秀的應用。而你項目中的健壯基礎保證了你的應用專一於內容優先。

使用漸進加強策略的網頁能夠保證 基礎內容 可以 老是 被搜索引擎的爬蟲爬取到並添加到索引。避免任何可能阻礙爬蟲抓取網頁內容的動態加載。

不管用戶的瀏覽器設置是什麼，漸進式 WEB（PWA）應用老是能夠知足他們。由於應用是使用漸進加強原則構建的。

總結思考

漸進加強策略專一於爲你的項目提供健壯的基礎，這個基礎能夠爲你在產品長期的計劃中提供巨大幫助。

在你的新項目中使用新的 JavaScript/CSS 框架多是很容易的，可是那可能會讓你去優雅降級。你會不斷的修復你的代碼以支持那些不支持框架的瀏覽器和設備。

儘管漸進加強策略也許在項目開始階段會佔用你更多的一點時間，可是它能夠保證在最壞的狀況下也能夠提供最基本的功能。在嚴重依賴 JavaScript 實現用戶界面展現的狀況下可能不適用漸進加強策略，可是對於一個長期的項目，漸進加強是值得考慮的。

但願這篇文章能爲你提供一些對漸進加強的概略的瞭解。

更多的關於漸進加強的文章：

• Designing with Progressive Enhancement: Building the Web that Works for Everyone: Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the...

• Unboring.net | Workflow: Applying Progressive Enhancement on a WebVR project: How I made an interactive content to be embedded on weather.com

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。