初学者的HTML5跨浏览器指南

关键要点

• Polyfill 是一种工具，让开发者能在不支持现代 Web 功能的旧版浏览器中使用这些功能，确保这些浏览器的用户仍然可以访问和使用网站，而不会损失任何功能或体验。
• Polyfill.io 是一个开源项目，按需提供 Polyfill 库，允许开发者使用最新的标准，同时保持与旧版浏览器的兼容性。它读取 User-Agent HTTP 头，只提供必要的 Polyfill，从而减少了现代浏览器的膨胀。
• 虽然 Polyfill 有助于在旧版浏览器中启用现代功能，但它也有一些潜在的缺点，例如增加网页的重量，这可能会减慢加载时间；以及可能无法完全或准确地复制其旨在 Polyfill 的功能，从而导致不一致或错误。

网页发展日新月异。新的框架、工具，甚至语言层出不穷。然而，许多开发者感到他们必须以最慢用户的速度前进。现代浏览器是“常青”的——它们在后台自动更新，无需请求许可，并且在改进新 API 方面取得了长足的进步。

然而，即使是现代浏览器也并非同时实现所有功能。阅读关于现代开发前沿技术的文章，却发现这些技术在未来几年都无法使用，这令人沮丧。也许您查看过网站的分析数据，发现仍有用户使用 IE9？您应该像 2011 年那样编写代码，还是将所有内容委托给 jQuery 或某个框架？还有另一种选择。那就是 Polyfill。

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

Remy Sharp 在 2009 年的一本书和博客文章中创造了这个术语。如果浏览器中存在该功能，Polyfill 允许浏览器执行其操作；如果不存在，Polyfill 会介入以弥补缺失的功能。它们填补了旧版浏览器的漏洞，即我们今天想要使用的缺失功能。它使用非原生代码复制原生 API。

我们谈论的是哪些缺失的功能？

2009 年，ECMAScript 第 5 版发布。这对这门语言来说是一个巨大而激进的进步。ECMAScript 2015 也带来了类似的重大更新。未来，对这门语言的改进将是渐进的，每年都会发生。这是一个令人兴奋的时代，新的功能不断添加到这门语言中。除了核心语言本身之外，还有 DOM 和 Web 平台的各种 API。为了突出现代浏览器和旧版浏览器之间的差异，以下是最新 Chrome 版本与 Internet Explorer 9（一些公司仍然令人遗憾地强制要求支持）的比较。还有一个表格显示了对 ECMAScript 6 的支持。第二个表格只追溯到 IE 11，正如您所看到的，它几乎不支持任何 ES6 功能。这是很多缺失的功能……

Polyfill 与转译

因此，从上面的表格中可以清楚地看出，我们需要转译我们的代码。它采用您闪亮的新语法，并输出老式的 ECMAScript 5。如果您想在代码中使用箭头函数、async/await、rest 和 spread 参数、类等，则需要使用 Babel 等工具将您的 ES6 代码转译为 ES5。但是，您无法 Polyfill JavaScript 的语法。虽然 Babel 会将您的箭头函数转换为常规函数，但 Polyfill 会向全局作用域和原生原型添加方法。Babel 提供了自己的 ES6 Polyfill，用 Babel 网站的话来说，它提供了“新的内置对象，如 Promise 或 WeakMap，静态方法，如 Array.from 或 Object.assign，实例方法，如 Array.prototype.includes，以及生成器函数。”因此，Babel Polyfill 可以为我们提供所有想要的 ES6 功能。但它遗漏了很多东西。也许您使用 classList API 添加和删除类，或使用 matchMedia 进行媒体查询，但您仍然需要支持 IE9。幸运的是，有一项服务可以提供 Babel Polyfill 涵盖的所有内容，以及更多内容。

使用 Polyfill.io 简化生活

Polyfill.io 是金融时报开发的一个开源项目。它目前每天接收多达 2.04 亿个请求，并称自己为“Polyfill 的规范库”。这个按需提供 Polyfill 的系统使您可以浏览 Can I Use，耸耸肩，使用最新的标准，并且仍然与旧版浏览器兼容。

理想情况下，我们应该只 Polyfill 我们实际使用过的功能，并且只发送特定浏览器实际需要的那些 Polyfill。Polyfill.io 可以同时满足这两个需求。该服务读取 User-Agent HTTP 头，以便只提供必要的内容，而不是向现代浏览器提供膨胀的文件。新的浏览器将收到几乎为空的文件，旧版本的 IE 将收到大量代码。您可以通过在查询字符串中指定您正在使用的功能列表来减轻发送到旧机器的代码的重量。如果省略，将使用一组默认值。使用该服务确实需要一个额外的阻塞 HTTP 请求，但在我看来，它的易用性是值得的。Google 的工程师 Philip Walton 对 Polyfill 和性能有自己的看法，如果您担心额外的请求，这值得一读。

它不涵盖什么？

Polyfill.io 非常全面，它包括一些前沿的浏览器 API，如 Fetch 和 Promises。然而，还有大量的 Polyfill 可以让您尝试和使用新技术。也许最令人兴奋的是 Web Components，这是一种潜在的革命性前端开发进步，它提供了样式封装和易于重用的功能。跨浏览器支持终于即将到来。Google 大力推动他们的 Polymer 项目，这基本上是一个建立在大型 Polyfill 之上的 JavaScript 框架。但是，Web Components 不应该等同于这个框架，因为 Web Components 本身就很有潜力。您可以无需 Polymer 即可使用组件，但 API 的全部范围尚未被复制。Web Animations API 提供了一种高效的无库方式，可以使用 Javascript 构建动画。浏览器支持目前还不是很好，但 shim 足够可靠，我已经自信地将这项技术用于我参与的所有生产网站的动画。它提供了两种选择——一种填充某些浏览器中当前可用的功能。另一种添加尚未最终确定的功能，这让我谈到了我的最后一个主题……

“Prolyfills”：测试新兴 API

以及 Prolyfills——对 可能 会出现的 API 的推测性 shim。

Polyfill 尚未发布的功能作为概念验证的做法越来越普遍，并且对于尝试前端开发的前沿技术来说很有趣。也许您想测试一下受流行的 RxJS 库启发的 Observables 建议？为此有一个 Prolyfill。尝试新技术是作为开发人员最令人兴奋的部分之一。

结论

就是这样。我们已经了解了什么是 Polyfill，为什么它们是必要的，如何从 polyfill.io 中提取您可能需要的任何 Polyfill，以及如何 Polyfill 尚未发布的功能。但您呢？您是否只使用您支持的所有浏览器中都可用的语言功能？或者您是否编写了现代代码，然后使用 Polyfill 使其在旧版浏览器中也能工作？您需要支持的最旧浏览器是什么？请在下面的评论中告诉我。本文由 Graham Cox 进行了同行评审。感谢所有 SitePoint 的同行评审人员，使 SitePoint 内容达到最佳状态！

关于 HTML5 跨浏览器 Polyfill 的常见问题

使用 HTML5 跨浏览器 Polyfill 的目的是什么？

HTML5 跨浏览器 Polyfill 用于在旧版浏览器中启用现代 Web 功能，这些浏览器本身并不支持这些功能。它们充当后备功能，提供与现代浏览器相同的功 能。这确保了旧版浏览器的用户仍然可以访问和使用网站或 Web 应用程序，而不会损失任何功能或体验。

如何在我的 Web 项目中实现 Polyfill？

在 Web 项目中实现 Polyfill 包括几个步骤。首先，您需要确定要 Polyfill 的功能。接下来，您需要找到一个合适的 Polyfill 来提供该功能。这可以通过在线搜索 Polyfill 库或存储库来完成。找到合适的 Polyfill 后，您可以通过使用脚本标签将其添加到 HTML 文件中来将其包含在您的项目中。

使用 Polyfill 有哪些潜在的问题或缺点？

虽然 Polyfill 非常有用，但它们确实有一些潜在的缺点。其中一个主要问题是性能。Polyfill 会增加网页的额外重量，这可能会减慢加载时间并对用户体验产生负面影响。此外，并非所有 Polyfill 都是一样的。有些可能无法完全或准确地复制它们旨在 Polyfill 的功能，这可能会导致不一致或错误。

如何为我的需求选择合适的 Polyfill？

选择合适的 Polyfill 取决于几个因素。首先，您需要考虑您尝试 Polyfill 的功能，并找到一个准确复制其功能的 Polyfill。您还应该考虑您要定位的浏览器，并确保 Polyfill 支持它们。最后，您应该考虑 Polyfill 的大小和性能，因为这些会影响您网站的加载时间和整体性能。

我可以创建自己的 Polyfill 吗？

是的，可以创建自己的 Polyfill。这涉及编写一个脚本，该脚本检查浏览器是否支持某个功能，如果浏览器不支持，则提供该功能。但是，创建自己的 Polyfill 可能很复杂且耗时，通常使用现有的 Polyfill 更容易、更高效。

有哪些流行的库或资源可用于查找 Polyfill？

有几个流行的库和资源可用于查找 Polyfill。这些包括 Polyfill.io，它提供一项服务，可以自动返回浏览器需要的 Polyfill；Modernizr 库，其中包含一系列 Polyfill；以及 GitHub 存储库 HTML5 跨浏览器 Polyfill，这是一个全面的 Polyfill 列表。

如何测试 Polyfill 是否正常工作？

测试 Polyfill 包括检查它旨在提供的功能是否在您要定位的浏览器中正常工作。这可以通过使用浏览器测试工具或手动在不同的浏览器中测试该功能来完成。如果该功能按预期工作，则 Polyfill 正常工作。

Polyfill 可以与 React 或 Angular 等 JavaScript 框架一起使用吗？

是的，Polyfill 可以与 React 或 Angular 等 JavaScript 框架一起使用。事实上，这些框架通常推荐甚至需要某些 Polyfill 以获得最佳兼容性和性能。使用这些框架实现 Polyfill 的过程类似于在常规 Web 项目中实现 Polyfill。

Polyfill 是解决浏览器兼容性问题的长期解决方案吗？

Polyfill 更像是解决浏览器兼容性问题的短期解决方案。它们用于填补浏览器对某些功能的支持空白，直到浏览器赶上并原生支持这些功能。随着浏览器不断发展和更新，对某些 Polyfill 的需求将会减少。

Polyfill 和 shim 之间有什么区别？

Polyfill 和 shim 都用于为浏览器不支持的功能提供后备功能。但是，shim 通常通过使用不同的现有 API 来为缺少的 API 提供后备功能，而 Polyfill 提供浏览器可以使用的新实现，就好像它是原生的。

以上是初学者的HTML5跨浏览器指南的详细内容。更多信息请关注PHP中文网其他相关文章！