什么是 Polyfill？

Polyfill 是一段代码（在 Web 环境中通常是 JavaScript），用于在本身不支持某项现代功能的旧浏览器中提供该功能。例如，可以使用 polyfill 通过 IE 专有的滤镜来模拟 IE7 中的text-shadow效果，或者通过 JavaScript 动态调整样式来模拟rem单位或媒体查询（media queries），以及其他你需要的功能。

polyfill 之所以被需要，是因为并非所有浏览器（尤其是旧版本）都原生支持最新的 Web 标准。通过引入 polyfill，开发者可以放心地使用现代 API 和语法，同时确保在旧环境中也能正常工作，而无需等待用户升级浏览器。

Polyfill 的工作原理

Polyfill 的核心思路是“检测并填补”：首先检查当前浏览器是否支持某个特性，如果不支持，则加载并执行一段模拟该特性的代码。这段代码通常以库的形式存在，例如core-js或polyfill.io提供的服务，它们会根据浏览器的 User-Agent 自动选择需要加载的 polyfill。

需要注意的是，polyfill 并不等同于“降级方案”或“优雅降级”。降级方案通常是在不支持时提供一种替代体验，而 polyfill 的目标是尽可能让旧浏览器获得与新浏览器一致的功能表现。因此，polyfill 往往需要精确模拟原生行为，包括边界情况和性能特征。

何时使用 Polyfill

在以下场景中，polyfill 特别有用：

• 你需要在旧版 IE（如 IE8、IE9）中支持 CSS3 特性（如border-radius、box-shadow）。
• 你需要使用 ES6+ 的新 API（如Promise、Array.prototype.includes），但目标环境不支持。
• 你需要使用新的 Web API（如fetch、IntersectionObserver），但希望兼容更广泛的浏览器。

不过，polyfill 并非万能药。它可能增加页面加载体积，且某些特性（如性能敏感的 API）难以完美模拟。因此，建议在项目初期就明确浏览器支持范围，并合理选择 polyfill 的引入方式（如按需加载、条件加载）。

对于译者而言，理解 polyfill 的机制有助于在编写技术文档或代码时，更准确地描述兼容性解决方案，并帮助读者在真实项目中做出合理的技术选型。

译文来源：MDN Polyfill（CC BY-SA 2.5 (MDN)），由本人翻译整理，转载请注明出处。