HTML5中的polyfills是啥意思？

Posted 2023-02-18

【中文标题】HTML5中的polyfills是啥意思？

【英文标题】：What is the meaning of polyfills in HTML5?HTML5中的polyfills是什么意思？

【发布时间】：2011-10-28 13:49:56

【问题描述】：

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

所以我们在这里收集了所有的 shims、fallbacks 和 polyfills 为了在不支持 HTML5 的浏览器中植入 HTML5 功能 原生支持它们。

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

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

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

【问题讨论】：

您可以检查以更好地理解blogs.msdn.com/b/jennifer/archive/2011/08/04/…

@user3400622 感谢链接，链接中的解释很清楚。

@user3400622 链接位于“找不到页面”。

【参考方案1】：

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

【讨论】：

也就是说ie7.js也是一个polyfill

是：“许多修复，包括 PNG 透明度、CSS 样式/选择器、渲染错误修复等。”它通过浏览器尚不支持的 javascript 添加此功能。

我认为 Polyfills 这个词是在 HTML5 之后出现的。 Shim 与 Polyfills 有什么不同？

垫片更通用。 polyfill 是一种 shim。这是一个很好解释的问题：***.com/questions/6599815/…

remysharp.com/2010/10/08/what-is-a-polyfill 这个链接不仅仅是一个“好帖子”，它实际上是创造这个词的人的完整定义和起源。摘录：“Polyfilla 产品（在美国为 spackling）是一种可以粘贴在墙上以覆盖裂缝和孔洞的糊状物。”这篇文章还涵盖了 shim 早于并且不同于 polyfill 的概念。这是必读的，IMO。

【参考方案2】：

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

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

这里是polyfill的来源和例子：

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

【参考方案3】：

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

【讨论】：

解释得很好。

短小精悍，切中要害。这应该是公认的答案。

【参考方案4】：

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 已被删除”。

【讨论】：

什么是垫片？

@Oliver Watkins 如果您熟悉适配器模式，那么您就会知道什么是 shim。 Shims 拦截 API 调用并在调用者和目标之间创建一个抽象层。通常，垫片用于向后兼容

@AnuragRatna 我不会使用“拦截”来避免混淆。拦截通常是指（透明地）拦截的代码，即在调用者不知道的情况下。 Shims 提供 API 调用以实现向后兼容性

【参考方案5】：

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

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

【参考方案6】：

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

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

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

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