[译] 一文教你什么是渐进加强，为何它很重要？

• 原文地址：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、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。