404

HTML5中的polyfills是什么意思？我在很多关于 HTML5 的网站上看到了这个词，例如HTML5-Cross-Browser-Polyfills。

因此，我们在这里收集了所有的 shims、fallbacks 和 polyfills，以便将 HTML5 功能植入本身不支持它们的浏览器中。

我其实不明白 polyfills 是什么意思。

它是一种新的 HTML5 技术还是一个 JavaScript 库？在 HTML5 之前我从未听说过这个词。

shims、fallbacks 和 polyfills 之间有什么区别？

4

6 回答 6

398

polyfill 是用 JavaScript 制作的浏览器回退，它允许您希望在现代浏览器中工作的功能在旧浏览器中工作，例如，在旧浏览器中支持画布（HTML5 功能）。

它是一种 HTML5 技术，因为它与 HTML5 结合使用，但它不是 HTML5 的一部分，您可以在没有 HTML5 的情况下使用 polyfill（例如，支持您想要的 CSS3 技术）。

这是一个好帖子：

http://remysharp.com/2010/10/08/what-is-a-polyfill/

以下是 Polyfill 和 Shim 的完整列表：

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

于 2011-08-17T02:32:22.147 回答
66

首先让我们澄清一下 polyfil 不是什么：polyfill 不是 HTML5 标准的一部分。polyfill 也不限于 Javascript，即使您经常看到在这些上下文中引用 polyfill。

术语 polyfill 本身是指一些代码，“允许您拥有一些您期望在当前或“现代”浏览器中的特定功能，也可以在不支持该功能的其他浏览器中工作。”

polyfill 的来源和示例在这里：

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

于 2013-09-16T23:08:22.480 回答
40

polyfill 是一段代码（或插件），它提供了您（开发人员）期望浏览器原生提供的技术。

于 2016-06-10T09:16:40.560 回答
17

polyfill 是一种 shim，它用对 shim 的调用替换了原始调用。

例如，假设您想使用 navigator.mediaDevices 对象，但并非所有浏览器都支持此功能。您可以想象一个提供 shim 的库，您可以像这样使用它：

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

在这种情况下，您是显式调用 shim 而不是使用原始对象或方法。另一方面，polyfill 替换了原始对象上的对象和方法。

例如：

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

在您的代码中，看起来好像您正在使用标准的 navigator.mediaDevices 对象。但实际上，polyfill（示例中的adapter.js）已经用它自己的对象替换了这个对象。

它取代它的是一个垫片。这将检测该功能是否本机支持并使用它，如果不支持，它将使用其他 API 解决它。

所以 polyfill 是一种“透明”的垫片。这就是 Remy Sharp（这个词的创造者）在说“如果你删除了 polyfill 脚本，你的代码将继续工作，而无需任何更改，尽管 polyfill 被删除”时的意思。

于 2016-12-06T13:32:25.777 回答
2

Web 开发中的polyfill是在不支持该功能的 Web 浏览器上实现该功能的代码。它通常是指实现 HTML5 或 CSS Web 标准的 JavaScript 库，既可以是已建立的标准（某些旧浏览器支持），也可以是现有浏览器上的提议标准（任何浏览器都不支持）。根据定义，“polyfill 是浏览器 API 的垫片”。

HTML5 标准不包含 polyfill。Polyfills 不仅限于 Javascript，尽管它们在上下文中经常被提及。

于 2021-06-29T11:52:23.787 回答
0

除了其他答案之外，这里还有一些可能会有所帮助的高级想法和信息。

Pollyfills 就像特定浏览器的兼容性补丁。垫片是对特定参数的更改。如果说 @mediaquery 与浏览器不兼容，则可以使用后备。

这有点取决于您的应用程序/网站需要兼容的要求。

您可以查看此站点以了解特定库与特定浏览器的兼容性。 https://caniuse.com/

于 2020-10-11T23:05:32.720 回答