Polyfill 方案的过去、现在和未来

Polyfill 方案的过去、现在和未来

在 Web 开发中，Polyfill 是一种重要的技术，它可以为浏览器提供缺失的功能或特性。Polyfill 的历史悠久，从早期的 shim 和 sham，到如今流行的 Babel、polyfill.io 和 core-js，Polyfill 方案经历了巨大的变革。

过去：shim 和 sham

在 Polyfill 出现之前，浏览器对于新特性的支持往往参差不齐，这导致开发者在开发过程中需要针对不同的浏览器编写不同的代码。为了解决这个问题，shim 和 sham 应运而生。

Shim 是一种模拟实现缺失功能的代码，它可以使浏览器在不具备该功能的情况下也能正常运行。例如，对于不支持 HTML5 的浏览器，我们可以使用 shim 来模拟 HTML5 的特性。

Sham 则是一种欺骗浏览器的方式，它可以让浏览器认为自己具备某项功能，从而使代码能够正常运行。例如，对于不支持 CSS3 的浏览器，我们可以使用 sham 来欺骗浏览器，使其认为自己支持 CSS3。

shim 和 sham 的出现极大地简化了 Web 开发，但它们也存在一些问题。首先，shim 和 sham 的代码往往非常复杂，而且难以维护。其次，shim 和 sham 可能与浏览器的其他功能冲突，从而导致兼容性问题。

现在：Babel、polyfill.io 和 core-js

随着浏览器对新特性的支持越来越好，shim 和 sham 的使用逐渐减少。取而代之的是，Babel、polyfill.io 和 core-js 等新的 Polyfill 方案开始流行。

Babel 是一种编译器，它可以将新特性的代码编译成浏览器可以理解的代码。例如，对于不支持 ES6 的浏览器，我们可以使用 Babel 将 ES6 的代码编译成 ES5 的代码。

polyfill.io 是一个在线服务，它提供了各种 Polyfill 的脚本。我们可以通过在网页中引用这些脚本，来为浏览器提供缺失的功能或特性。

core-js 是一个 JavaScript 库，它提供了各种 Polyfill 的实现。我们可以通过在项目中引入 core-js，来为浏览器提供缺失的功能或特性。

与 shim 和 sham 相比，Babel、polyfill.io 和 core-js 具有以下优点：

• 代码更加简洁，易于维护。
• 与浏览器的其他功能冲突的可能性更小。
• 可以支持更多的新特性。

未来：inline Polyfill

随着浏览器对新特性的支持越来越好，Polyfill 的使用可能会逐渐减少。取而代之的是，inline Polyfill 将成为主流。

Inline Polyfill 是一种将 Polyfill 代码直接嵌入到网页中的技术。这种技术的好处是，它可以减少 HTTP 请求的数量，从而提高网页的加载速度。

目前，已经有了一些工具可以帮助我们实现 inline Polyfill，例如 @babel/polyfill 和 @parcel/transformer-inline-polyfills。

总结

Polyfill 方案经历了从 shim 和 sham 到 Babel、polyfill.io 和 core-js 的发展过程。随着浏览器对新特性的支持越来越好，Polyfill 的使用可能会逐渐减少，取而代之的是 inline Polyfill。