onload事件是按需加载polyfill的核心机制，通过特性检测动态加载最小化子集，支持可组合、可缓存、可降级的加载链，并需兼容ios/android旧版浏览器细节。

莓图AI

莓图AI是一款AI文本写作工具，专注于AI图片生成与视觉风格复刻的智能创作平台。

下载

<script> 标签的 `onload` 事件是实现按需加载 Polyfill 的核心机制之一，尤其适合中台系统这种需兼顾多端（PC、iOS、Android、旧版浏览器）且特性差异大的场景。它不依赖构建工具或打包时预设，而是运行时探测、动态加载、精准补丁，真正实现“用什么，加什么”。 <p><strong>Polyfill 加载必须基于特性检测，而非 UA 判断<br /> 直接判断 <code>if (!('IntersectionObserver' in window)) 比 <code>if (/MSIE|Trident/.test(navigator.userAgent)) 更可靠。现代中台应统一使用 <a href="https://www.php.cn/link/e3acae64e67d7f9356d29d7b617bf110">core-js 或 <a href="https://www.php.cn/link/d457c0235036396f11714cb337bc0445">polyfill.io 提供的最小化子集，或自建轻量级 polyfill 包（如仅含 <code>Array.from + <code>Promise + <code>fetch 的 3KB bundle）。<p><strong>用 onload 实现可组合、可缓存、可降级的加载链 <pre class='brush:js;toolbar:false;'>function loadPolyfill(url, { timeout = 5000 } = {}) { return new Promise((resolve, reject) => { const script = document.createElement('script'); script.src = url; script.crossOrigin = 'anonymous'; const timer = setTimeout(() => { script.remove(); reject(new Error(`Polyfill timeout: ${url}`)); }, timeout); script.onload = () => { clearTimeout(timer); resolve(url); }; script.onerror = () => { clearTimeout(timer); reject(new Error(`Polyfill failed: ${url}`)); }; document.head.appendChild(script); }); }<p>该函数返回 Promise，支持 <code>await、<code>.then()、<code>Promise.allSettled() 等组合，便于构建条件链： <ul><li>先检测 <code>window.Promise，缺失则加载 <code>promise-polyfill.min.js； <li>再检测 <code>window.fetch，缺失则叠加 <code>whatwg-fetch； <li>最后检查 <code>window.HTMLElement.prototype.attachShadow，决定是否注入 <code>webcomponentsjs 的 <code>custom-elements-es5-adapter.js + <code>webcomponents-bundle.js。<p><strong>跨平台兼容性关键细节 <ul><li>iOS 10–12 Safari 不支持 <code>async: true 动态 script 的 <code>onload，需回退到 <code>onreadystatechange（<code>readyState === 'loaded' || 'complete'）； <li>Android WebView 4.x（旧版 UC/QQ 浏览器）可能忽略 <code>onload，建议加兜底：<code>setTimeout(() => { if (typeof neededAPI !== 'undefined') resolve(); }, 100)； <li>所有 polyfill 脚本必须设 <code>crossOrigin="anonymous"，否则在开启 CORS 的中台 API 场景下会因缺少响应头而静默失败； <li>避免重复加载：用 <code>Map 缓存已加载 URL，<code>if (loadedPolyfills.has(url)) return Promise.resolve()； <li>加载完成后立即执行 <code>script.remove()，减少 DOM 干扰与内存残留。<p><strong>中台落地建议 <ul><li>在登录页或首页入口统一执行一次特性探测 + polyfill 加载，后续路由复用已有环境； <li>将 polyfill 加载逻辑封装为 <code>usePolyfill() React Hook 或 <code>polyfillService Vue 插件，与业务解耦； <li>对于微前端场景，主应用负责基础 polyfill（Promise、fetch、Object.assign），子应用只加载自身特有需求（如 Chart.js 依赖的 <code>ResizeObserver）； <li>生产环境配合 sourcemap 和错误监控（如 Sentry），捕获 <code>onerror 未兜住的 polyfill 失败，反向优化检测逻辑。<p>本质上，<code><script> 的 <code>onload 不是黑魔法，而是把浏览器原生加载能力当作“特性开关”的触发器——它让中台不再为兼容性妥协架构，而是让兼容性随需生长。 </script>