HTML5跨浏览器Polyfill入门指南

网络似乎快速发展。 新的框架，工具甚至语言都在不断出现。 然而，许多开发人员认为他们必须与最慢的用户一样快。 新的浏览器是“常青树”-它们会在后台自动更新，而无需征求许可，并且在进步新API方面取得了飞跃性的发展。

然而，即使是现代的浏览器，也会在不同的时间实现功能。 阅读有关现代发展的前沿知识，以为在未来几年内一切都无法使用，这真令人沮丧。 也许您已经浏览了网站的分析结果，发现仍然使用IE9的用户？ 您应该像2011年那样编写代码，还是将所有内容委托给jQuery或某个框架？ 还有另一种选择。 输入polyfill 。

什么是Polyfill，为什么我们需要它们？

雷米•夏普（Remy Sharp）在2009年的书和博客中创造了这个词。 如果浏览器中存在该功能，则polyfill允许浏览器执行其操作，否则，polyfill介入以插入缺少的功能。 它们填补了旧版浏览器的空白，这是我们今天要使用的缺失功能。 它使用非本机代码复制本机API。

我们正在谈论哪些缺少的功能？

2009年，第5版ECMAScript登陆。 这是该语言向前迈出的一大步。 ECMAScript 2015进行了类似的地震更新。 展望未来，该语言的改进将逐年递增。 这是一段激动人心的时刻，新功能不断融入语言。 除了核心语言本身之外，还有DOM和网络平台的各种API。

为了强调现代浏览器与旧版浏览器之间的差异，以下是最新的Chrome版本与Internet Explorer 9 （有些公司仍然遗憾地要求支持）的比较。 下表显示了对ECMAScript 6的支持 。 第二张表只能追溯到IE 11，如您所见，它几乎支持零ES6功能。 那是很多缺少的功能……

Polyfills与Transpiling

显然，从上面的表中可以看出，我们需要转换代码。 它采用了崭新的语法，并吐出了普通的老式ECMAScript5。如果要在代码中使用箭头函数，异步/等待，休息和传播参数，类等，则需要将ES6代码转换为ES5用Babel这样的工具。

但是，您不能多填JavaScript的语法。 当Babel将您的箭头函数转换为常规函数时，polyfill会将方法添加到全局范围和本机原型中。 Babel提供了自己的ES6 polyfill ，用Babel网站的话来说，提供了“ Promise或WeakMap类的新内置WeakMap ， Array.from或Object.assign类的静态方法， Array.prototype.includes类的实例方法以及生成器函数” 。”

因此，Babel polyfill可以为我们提供所需的所有ES6功能。 但是有很多遗漏的地方。 也许您可以使用classList API添加和删除类，或者使用matchMedia进行媒体查询，但是仍然需要支持IE9。 幸运的是，有一项服务可提供Babel polyfill涵盖的所有内容，以及更多。

通过Polyfill.io使生活更轻松

Polyfill.io是由《金融时报》开发的开源计划。 目前，它每天接收多达2.04亿个请求，并自称为“标准的polyfills库”。 这种按需填充的交付系统使您可以细读我可以使用 ，耸耸肩，使用最新标准，并且仍然与旧版浏览器兼容。

昨天@polyfillio有 2.04亿个请求！ 粉碎所有先前的记录。 😅 pic.twitter.com/tifoPGQptW

—爱丽丝·巴特利特（@alicebartlett） 2017年5月24日

理想情况下，我们应该只使用我们实际使用的polyfill功能，并且只发送特定浏览器实际需要的polyfill。 Polyfill.io可以满足这两个需求。 该服务不是向现代浏览器传递膨胀信息，而是读取User-Agent HTTP标头，以便它只能传递必要的信息。 新的浏览器将收到几乎为空的文件，旧版本的IE将收到大量的代码。

您可以通过在查询字符串中指定要使用的功能列表来减轻传递给较旧计算机的代码的负担。 如果省略，将使用一组默认值。 使用该服务确实需要一个额外的阻止HTTP请求，但是在我看来，它的易用性值得。 Google的工程师Philip Walton对塑料填充物和性能有自己的想法 ，如果这个额外的要求打扰您，则值得一读。

它不涵盖什么？

Polyfill.io非常全面，它包含一些尖端的浏览器API，例如Fetch和Promises。 但是，存在着一个充满填料的世界，可以让您试验和使用新技术。 其中最令人兴奋的也许是Web组件 ，这是前端开发中潜在的革命性进步，它提供样式封装和易于重用。 跨浏览器支持终于来了。 Google大力推动了他们的Polymer项目，该项目基本上是建立在巨型polyfill之上的JavaScript框架。 但是，Web组件不应该等同于此框架，因为Web组件本身就具有强大的功能。 您可以使用没有Polymer的组件，但尚未复制API的全部色域。

Web Animations API提供了一种无需执行库的高性能方式，可以使用Javascript构建动画。 目前对浏览器的支持不是很好，但事实证明该填充程序足够可靠，以至于我已经自信地将这项技术用于我制作过的制作站点上的所有动画。 它提供了两个选项-一个填补了某些浏览器中当前可用的功能。 其他添加了尚未完成的功能，这使我进入了最后一个话题……

'Prolyfills'：测试新兴API

然后进行预填充– 可能发生的API投机填充。

Prollyfill：用于尚未标准化的API的polyfill。

— Alex Sexton（@SlexAxton） 2012年10月14日

尚未作为概念证明提供的Polyfilling功能变得越来越普遍，对于尝试开发前端开发的前沿功能很有趣。 也许您想测试受流行RxJS库启发的Observables提案？ 有一个prolyfill 。 尝试新技术是成为开发人员最令人兴奋的部分之一。

结论

所以你有它。 我们已经研究了什么是polyfill，为什么有必要，如何从polyfill.io中提取您可能需要的任何polyfill ，甚至还介绍了尚未交付的polyfill功能。

那你呢 您是否仅使用所有支持的浏览器中提供的语言功能？ 还是您正在编写现代代码，然后使用polyfills使其在较旧的浏览器中运行？ 您期望支持的最早的浏览器是什么？ 在下面的评论中让我知道。

本文由Graham Cox同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态！

From: https://www.sitepoint.com/html5-cross-browser-polyfills/