Polyfill——一个用在浏览器API上的shim
Polyfill是用在浏览器API上的shim。我们通常的做法是先检查当前浏览器是否支持某个API，如果不支持的话就加载对应的polyfill。这样新旧浏览器就都可以使用相同的API了。把旧的浏览器想象成为一面有了裂缝的墙，这些polyfill（腻子）会帮助我们把这面墙的裂缝抹平。
polyfill 是 shim 的一种。一个polyfill可以是一段代码(或者插件)，提供了那些开发者们希望浏览器原生就支持的功能**。**主要抚平不同浏览器之间对js实现的差异。
shim 是将不同 API 封装成一种的库，shim将一个新的API引入到一个旧的环境中，而且仅靠旧环境中已有的手段实现。
比如 jQuery是一个shim库，jQuery 的 . a j a x 方法封装了 X M L H t t p R e q u e s t 方法和 I E 用的 A c t i v e X O b j e c t 方式来创建 x h r 对象（通俗地讲，依靠浏览器原生支持的两个 A P I ，封装成 .ajax方法 封装了 XMLHttpRequest 方法和 IE 用 的ActiveXObject 方式来创建 xhr 对象（通俗地讲，依靠浏览器原生支持的两个API，封装成 .ajax方法封装了XMLHttpRequest方法和IE用的ActiveXObject方式来创建xhr对象（通俗地讲，依靠浏览器原生支持的两个API，封装成.ajax这个新的API，使用时，只需调用$.ajax这个新的API ，而不是调用XMLHttpRequest或ActiveXObject这两个原生API ）。
可以把shim，理解成能够兼容之前版本的库，是一种优雅降级。
polyfill 特指 shim 成的 api 是遵循浏览器标准的，其典型做法是在IE浏览器中增加window.XMLHttpRequest ，内部实现使用 ActiveXObject（见下面举例）。
举例1：如何区分polyfill和shim
问题：旧版本的 IE 不支持标准的 XMLHttpRequest，但支持自家的 ActiveXObject 方法
解决办法1-shim（jQuery中，把XMLHttpRequest和ActiveXObject这两个新旧浏览器中的原生API，封装成 $.ajax 这个新的API。使用时，只要熟悉 $.ajax这个新的API 的使用就可以了，不用考虑浏览器的兼容问题）
$.ajax = function(url) {
if (isIE) {
XMLHttpRequest(url)
} else {
ActiveXObject(url)
}
}
解决办法2-polyfill（判断浏览器 是否支持新版浏览器中XMLHttpRequest这个原生API，如果不支持，就用旧版浏览器中ActiveXObject这个原生API 来实现 一个功能跟 新版浏览器中XMLHttpRequest这个原生API 完全一样的函数，并赋值给XMLHttpRequest这个原生API，这样，开发者使用时，就还可以使用XMLHttpRequest这个原生API啦，不用再去学习jQuery库咯）
if (!window.XMLHttpRequest) {
window.XMLHttpRequest = function(url) {
ActiveXObject(url)
}
}
举例2：如何区分polyfill和shim
问题：旧浏览器不支持 ES6 的 Array.prototype.find 方法
解决办法1-shim（封装一个新的API，使用时也调用这个新的API）
function arrayFind () {
if (Array.prototype.find) {
// …
} else {
// …
}
}
解决办法2-polyfill（判断浏览器 是否支持新版浏览器中Array.prototype.find这个原生API， 如果不支持，就实现一个函数，并赋值给Array.prototype.find这个原生API，这样，开发者使用时，就还可以使用Array.prototype.find这个原生API啦）
if (!Array.prototype.find) {
Array.prototype.find = function() {
// …
}
}
总结：如何区分polyfill和shim
以上举例中，两种解决办法都能解决跨浏览器兼容的问题，看着也没有特别的差别。
但是我们更推荐【解决办法2】，
首先，像shim这样应用一个新的API，有一定的学习成本，特别是在多人协作的过程中，如果你自己定义了一个方法去解决兼容问题，就需要告知其他开发人员这个新的API应该如何调用。而polyfill的做法，还是调用原生API就OK啦！
其次，polyfill可以实现按需加载，只在旧浏览器上加载兼容代码。
shiv——使得不支持HTML5标签的浏览器（诸如ie6-8）, 支持html5标签
举例几个比较著名的shiv库：
html5shiv，让低版本IE浏览器也能支持header、section、nav、footer这些语义化标签。html5shiv的原理就是把在IE 9 以下不支持的新标签用createElement方法声明出来。
Github地址：https://github.com/aFarkas/html5shiv
使用方法：当IE浏览器版本小于9时，引入这个html5shiv：
Respond**，IE6-8不支持CSS3的媒体查询，想要在IE6-IE8实现响应式设计基本是不可能的。Respond库的引用能够让低版本IE浏览器能够支持媒体查询中** min/max-width这两个特性**（A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)）**
Github地址：https://github.com/scottjehl/Respond
使用方法：同上，使用IE表达式引入
Modernizr ——一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性
一种主动检测兼容性的方式，对于一些实验性或不确定兼容性的新特性推荐这种主动检测兼容性的方式，而不是到测试的时候再发现兼容性问题（防御编程）。
如何在****多个设备上同步调试？
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（资料价值较高，非无偿）
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。
**
最后
文章到这里就结束了，如果觉得对你有帮助可以点个赞哦，如果有需要前端校招面试题PDF完整版的朋友可以点击这里即可获取，包括答案解析。
[外链图片转存中…(img-QVZ8um1D-1711766037095)]
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
