使用 polyfills 的简易方法
发布于 9 年前 作者 OneAPMOfficial 4125 次浏览 最后一次编辑是 8 年前 来自 分享

本文作者为 Andrew Betts 与 Robert Nyman。Andrew 是金融时报(Financial Times)实验室主任，该实验室旨在金融时报开发并推广实践性的 Web 技术。Robert 是 Mozilla Hacks 技术传道师及编辑。曾就 HTML5，JavaScript 以及 Open Web 发表过多次谈话与博文。Robert 坚定地看好 HTML5 与 Open Web，自1995年就开始在 Front End 开发部门研究 Web 技术。

本文系 OneAPM 工程师 编译呈现，以下为正文。

Polyfills是一种保证使用现代代码的绝佳办法，同时还能支持旧版浏览器。但是目前polyfills使用起来很困难，因此我们开发了一种全新的服务以便简化其使用方法。在此，邀请读者使用并改进它。

挑战

下面是我们正在尝试解决的一些问题：

  • 开发者对哪些特性需要使用polyfill不是很清楚。例如你在某个旧版本的IE浏览器（因为你有很大数量的用户还在使用它）中载入网站，发现网站不工作，你不得不慢慢调试来搞清楚到底是哪个特性导致了这个问题。有时候问题很清楚，但大多时候并非如此，尤其是旧版浏览器往往缺少好的开发者工具的时候。

  • 针对每个特性都有很多polyfill可供选择。很难确定哪一个能最忠实地模拟缺少的特性。

  • 有一些大的polyfill捆绑着很多你不需要的polyfill，例如ES6，它全面覆盖了一系列的特性集。为了解决一个简单的问题而向浏览器植入所有的这些代码其实是不必要的。

  • 较新版本的浏览器不需要polyfill，但一般来说polyfill可用于所有种类的浏览器。虽然这是为了提高与旧版浏览器的兼容性，但这也降低了新版浏览器的性能。我们不愿意做出这种妥协。我们更愿意在原本不具备某个特性的浏览器上使用polyfill。

我们的解决办法：以polyfill为服务

为了解决这些问题，我们开发了polyfill服务。这有点像是验光师先对你的眼睛验光检查，然后针对你的视力问题配置眼镜。我们将对浏览器做同样的事情。下面解释它是如何工作的：

  1. 开发人员在他们的页面中插入一个脚本标记作为导入polyfill服务的端点。

  2. 该服务分析浏览器的user-agent标头和必需特性列表（或是使用一个默认的可使用polyfill服务的列表），然后搭建浏览器所需的polyfill列表。

  3. 按照正确的依赖顺序表定制polyfill。

  4. 通过CDN 压缩服务包并提供服务（对此我们衷心感谢Fastly的支持）。

我们真的需要这个解决办法吗？你可以这样思考：Modernizris是一个大型的特性检测包，所有对它的合理使用都得益于自定义的安装配置，但是很大数量的Modernizris用户仅仅使用了它的默认安装，这常常是来自于 cdnjs.com 或是 html5boilerplate 的某个部件。但是，如果不使用Modernizris的特性检测功能，那你为什么安装这个工具呢？可能你误解了库文件的功能，单纯地以为Modernizris会“修补东西”？不得不承认，第一次听到这个名字的时候笔者正是这样想的，以至于后来发现Modernizris不但没有起到作用，反而拖了现代浏览器的后腿，笔者感到有些失望。

然而，Polyfill服务却是真正起到了作用。不想花时间去深入了解旧版本浏览器缺点的你一点儿错也没有。让别人先弄明白问题所在，然后我们在不需要了解细节的情况下就能直接受益。

如何使用

最简单的使用情况是：

<script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>

这包含了我们默认的 polyfill设置。这个默认设置是我们人工挑选的一个特性列表，我们认为这个列表中所包含的特性对于现代网络开发来说不可或缺，而且相对应的polyfill相当小且十分精确。如果你想指定添加某个polyfill特性，只需要这么做：

<!-- Just the Array.from polyfill -->

<script src="//cdn.polyfill.io/v1/polyfill.min.js?features=Array.from" async defer></script>

 

<!-- The default set, plus the geolocation polyfill -->

<script src="//cdn.polyfill.io/v1/polyfill.min.js?features=default,Navigator.prototype.geolocation" async defer></script>

如果有必要在解析自己的代码之前加载polyfill的话，你可以移除async和defer属性，或是使用一个脚本加载器（不需要任何polyfill的加载器！）

测试与文档特性支持

我们所支持特性的完整表格在特性矩阵中。为了搭建这个网格，我们使用了Sauce Lab的自动测试平台，它截获了polyfill在每个浏览器中的测试，然后记录结果。

User-Agent 分析？ 你确定？

是的，我们确定。下面是为什么UA分析要比特性检测好的原因：

  • 在一些情形中，针对同一特性我们有多个polyfill可供选择，这是因为一些浏览器提供非顺从实施方式，因此只需要你敲打成型即可，而其他浏览器则没有提供任何的实施。但若是有UA检测，你能够选择相应的polyfill。
  • 有了UA检测，第一个HTTP请求就能直接由polyfill代码应答。如果我们使用了特性检测，第一个请求将会为特性检测代码服务，而第二个请求则需要用于获取特定的polyfill。

几乎所有的大型网站都使用UA检测。这并不是说与之相关的特征就是不好的。显然，好的UA规则要比差劲的UA规则更难编写。而且我们并没有排除借助特性检测使用该服务的可能。

人人可用的服务

应用的服务部分由FT负责维护运营，我们也正不断地扩展和改进相关工具，文档，测试和服务特性。源代码可以在GitHub上上下载，因此你能轻易地自行配置服务，我们也在cdn.polyfill.io上面配置了一个实例服务，你可以免费使用。而且，Fastly的朋友正提供免费的CDN发布和SSL。

我们已经建好了平台。现在，我们需要社区的力量让它火起来。我们已经提供了一些来自Jonathan Neal， Mathias Bynens等人的最佳polyfill服务，我们想要做得更加全面。请带上你的polyfill，帮助我们改进测试，让它成为能推动网络前行的一项资源吧。

OneAPM 助您轻松锁定 Node.js 应用性能瓶颈，通过强大的 Trace 记录逐层分析，直至锁定行级问题代码。以用户角度展示系统响应速度，以地域和浏览器维度统计用户使用情况。想阅读更多技术文章，请访问 OneAPM 官方博客。 本文转自 OneAPM 官方博客 原文地址：https://hacks.mozilla.org/2014/11/an-easier-way-of-using-polyfills/

回到顶部