polyfill.io 的按需加载原理是服务端根据 User-Agent 字符串查表匹配预设的浏览器能力矩阵，动态返回缺失特性的 polyfill 脚本，不分析代码或运行时环境。
polyfill.io 的按需加载原理是什么
polyfill.io 不是本地 JS 文件，而是一个远程服务：它根据请求头中的 User-Agent 字符串动态生成只包含当前浏览器缺失特性的 polyfill 脚本。所以“按需”本质是服务端判断，不是前端运行时检测。
- 请求
<a href="https://www.php.cn/link/4aa29ca00d7fb2c2a06f51bd15ebf772">https://www.php.cn/link/4aa29ca00d7fb2c2a06f51bd15ebf772</a>会返回带这两个特性的 polyfill（如果浏览器不支持） - 但更常用的是让它全自动判断：直接用
<a href="https://www.php.cn/link/f923af82780472d2c31bb6cea94ba72f">https://www.php.cn/link/f923af82780472d2c31bb6cea94ba72f</a>，或干脆不带features参数，靠User-Agent推断 - 注意：它不分析你的代码，也不扫描
document或运行时环境，纯靠 UA 字符串查表匹配预设的浏览器能力矩阵
怎么在 HTML 中正确引入 polyfill.io
最简方式就是一行 <script>，放在 <head> 或 <body> 顶部（越早越好，避免后续脚本因缺少 API 报错）：
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6%2Ces2015%2CIntersectionObserver" defer></script>
-
defer是推荐的，它让 polyfill 在 HTML 解析完成后再执行，但保证顺序（比async更稳妥） - 不要加
crossorigin，除非你明确配置了 CORS 头；polyfill.io 默认允许跨域，加了反而可能触发预检失败 - 避免写成
<a href="https://www.php.cn/link/100a1f43c56bb71781a2231a79900488">https://www.php.cn/link/100a1f43c56bb71781a2231a79900488</a>这类混用——polyfill.io 和其他 polyfill 库不能互相替代，也别叠加载
为什么有时 polyfill 没生效或报错
常见失效场景和对应检查点：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 浏览器 UA 被篡改或隐藏（比如某些安卓 WebView、微信内置浏览器、测试工具如 Puppeteer 默认 UA），导致 polyfill.io 返回空内容或错误集合 → 可手动指定
ua参数调试：<a href="https://www.php.cn/link/0cc2bf830e3179f40b611271a2befbd6">https://www.php.cn/link/0cc2bf830e3179f40b611271a2befbd6</a>) - 使用了
integrity属性但没更新哈希值 → polyfill.io 动态生成内容，integrity会校验失败，必须删掉 - 本地开发用
file://协议打开 HTML →User-Agent不可靠，且部分浏览器会禁用跨域请求 → 改用<a href="https://www.php.cn/link/bb122c8fe6c764e8aae555e2186a6344">https://www.php.cn/link/bb122c8fe6c764e8aae555e2186a6344</a>启服务（如npx serve） - 同时引入了 Babel runtime 或 core-js → 它们和 polyfill.io 提供的 polyfill 可能重复甚至冲突（比如都补
Array.from），建议二选一
要不要自己 fallback 到本地 polyfill
可以，但仅限高敏感场景（如金融级兼容、离线环境、对首屏性能极致控制）。方法是用 onerror 回退：
立即学习“前端免费学习笔记（深入）”；
<script>
function loadPolyfill(src) {
const script = document.createElement('script');
script.src = src;
script.onerror = () => {
// 加载本地备份
document.write('<script src="/js/polyfills.min.js"></script>');
};
document.head.appendChild(script);
}
loadPolyfill('https://www.php.cn/link/f923af82780472d2c31bb6cea94ba72f');
</script>- 注意：
document.write在 DOM 解析完成后调用会清空页面，所以这个 fallback 必须在<head>里同步执行 - 更安全的做法是预存一个轻量
fetch+eval回退，但涉及 CSP 限制，实际落地成本高 - 大多数项目没必要搞 fallback：polyfill.io 稳定性足够，CDN 覆盖广，且它的 UA 判断表更新及时；真正该花时间的是确认你写的代码确实需要那些 polyfill（比如是否真用了
Object.assign而不是只用在 demo 里）
