JS向后兼容技术——Polyfills简介

一、JS向后兼容技术——Polyfills简介

1、Polyfills，一种用于在旧版或不支持某些新特性的浏览器中提供对这些特性的支持的JavaScript代码，旨在确保网站和应用程序在各种浏览器环境中正常运行，以实现向后兼容性。

2、“Polyfill”源自填补物，用来弥补空隙或缺陷。这一术语由开发者Remy Sharp在2010年提出，用于描述一种技术手段，即在旧的或不完全支持某些功能的浏览器或环境中，通过添加代码实现这些功能，使现代特性能在这些环境中运行。

3、使用Polyfills可以克服浏览器兼容性问题，确保网站和应用程序在各种浏览器环境中正常运行。开发者能使用最新的Web技术和API，而无需担心旧版浏览器限制。

4、然而，使用Polyfills需考虑性能影响。引入Polyfills会增加页面加载和脚本执行时间，因此需谨慎选择，考虑性能影响。Polyfills也需要定期维护和更新，以确保与最新浏览器版本兼容。

5、除了使用Polyfills，还有其他替代方案如特性检测、渐进增强和浏览器升级提示，这些方法可与Polyfills结合使用，提供更好的用户体验和性能。

6、总之，Polyfills是实现浏览器兼容性的重要工具。理解其概念、工作原理和使用方式，开发者能构建跨浏览器兼容的网站和应用程序。同时，需权衡性能影响，并考虑其他替代方案，以提供最佳用户体验。

二、一文搞清楚前端 polyfill

1、polyfill在前端开发中扮演着关键角色，其主要功能是为未实现的客户端行为提供补丁。本文将探讨polyfill的三种常见应用方式，包括手动打补丁、根据覆盖率自动打补丁以及结合构建工具自动打补丁。

2、手动打补丁是最基础的方式，涉及到直接导入所需的polyfill，例如ES6的object#assign在旧版浏览器中的补丁。这种方法优点在于保持最小引入，但缺点是难以管理和维护，尤其是当面对多样化的polyfill和快速变化的Web应用时。

3、自动打补丁则利用了现代工具的强大功能，如Webpack、@babel/preset-env、@babel/plugin-transform-runtime和core-js等。@babel/preset-env根据目标环境智能选择需要的转换和polyfill，@babel/plugin-transform-runtime则优化了helper方法的使用，而core-js提供了JavaScript标准库的实现。这些工具能根据项目的具体需求自动选择和应用polyfill。

4、当处理应用的补丁时，@babel/preset-env的useBuiltIns参数提供了一种更智能的方式。通过设置useBuiltIns为"entry"并指定core-js版本，可以根据应用的目标兼容性自动获取所需的polyfill。这不仅简化了构建流程，还能有效控制引入的polyfill数量，减少打包体积。

5、对于库的补丁，其设计原则是只提供库本身依赖的专有补丁，避免不必要的引入。这要求开发者在引入外部库时，确保库的依赖与应用的兼容性匹配，避免提供所有浏览器都已支持的通用功能。

6、动态打补丁则是一种更先进的策略，如Polyfill.io提供的服务，根据浏览器特性动态提供所需的polyfill。这能有效减少冗余引入，提升性能。Polyfill.io可以根据浏览器的UA返回不同的补丁代码，甚至允许定制化的配置。

7、展望未来，按需特性补丁与在线补丁的结合是趋势所在。通过使用如useBuiltIns的usage参数实现按需引入，同时利用Polyfill.io等服务根据设备特性动态提供补丁，可以达到最小化引入同时最大化性能的效果。这种策略将为前端开发者提供更高效、灵活的polyfill管理方式。

三、shim和polyfill有什么区别

1、在JavaScript的世界里,有两个词经常被提到,shim和polyfill.它们指的都是什么,又有什么区别?

2、一个shim是一个库,它将一个新的API引入到一个旧的环境中,而且仅靠旧环境中已有的手段实现

3、一个polyfill就是一个用在浏览器API上的shim.我们通常的做法是先检查当前浏览器是否支持某个API,如果不支持的话就加载对应的polyfill.然后新旧浏览器就都可以使用这个API了.术语polyfill来自于一个家装产品Polyfilla:

4、Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器)

5、Paul Irish发布过一个Polyfills的总结页面“HTML5 Cross Browser Polyfills”.es5-shim是一个shim(而不是polyfill)的例子,它在ECMAScript 3的引擎上实现了ECMAScript 5的新特性,而且在Node.js上和在浏览器上有完全相同的表现(译者注:因为它能在Node.js上使用,不光浏览器上,所以它不是polyfill).