第三方脚本同步加载会阻塞html解析，导致dom构建停摆、首屏白屏；应使用async/defer、动态创建、预连接、懒加载等策略优化。
第三方脚本同步加载直接阻塞 HTML 解析
只要 <script src="https://third-party.com/sdk.js"></script> 没加 async 或 defer，浏览器就会在解析 HTML 到该标签时立刻暂停、发起请求、等下载+执行完才继续。这不是“慢”，是“卡死”——DOM 构建停摆，首屏内容压根不会渲染。
常见错误现象：DOMContentLoaded 延迟超 2s、FCP（首次内容绘制）为 0、Network 面板里 HTML 后紧跟着一个长条的 JS 请求且 Initiator 是 Parser。
- 即使第三方脚本内容为空，HTTP 请求本身也触发阻塞
- CDN 域名未预连（
<link rel="preconnect" href="https://cdn.example.com">），DNS/TCP/SSL 建连可能耗时 300–800ms - 脚本返回 404 或超时，浏览器仍会等待默认 timeout（通常 10–30s），期间页面白屏
iframe 默认同步加载拖垮主页面渲染
<iframe src="https://widget.example.com"></iframe> 不加任何控制，默认行为和同步 script 几乎一样：HTML 解析停、主线程挂起、Paint 被推迟。尤其当 iframe 内容含重 CSS/JS 时，主页面的 LCP 和 CLS 会剧烈恶化。
使用场景：客服浮窗、嵌入视频、广告位、表单弹层——这些都不该在首屏立即加载。
- 优先用
loading="lazy"（Chrome/Firefox/Edge 支持，Safari 15.4+），但注意 Safari 旧版需降级 fallback - 更可靠的是动态创建：
const iframe = document.createElement('iframe');+iframe.src = url;，配合 IntersectionObserver 触发 - 务必设
sandbox属性（如sandbox="allow-scripts allow-same-origin"），否则第三方可任意操作主页面 DOM - 避免在
或首屏区域写死src，哪怕加了display: none也无法解除阻塞
第三方 CSS/字体引发的隐性渲染阻塞
第三方样式表（如地图 SDK 的 UI 样式）或字体（如 Google Fonts）常被忽略，但它们是 render-blocking 关键路径上的隐形杀手。一个 <link rel="stylesheet" href="https://map-api.com/ui.css"> 放在 里，就能让所有后续 JS 执行和 Paint 等待它下载+解析完毕。
典型表现：Performance 面板中出现长时 Parse Stylesheet 任务，且位置紧贴 FCP 前；Network 面板显示该 CSS 的 Initiator 是 Parser，而非 JS。
- 第三方 CSS 绝对不要内联——你无法控制其更新，缓存失效风险高
- 改用
<link rel="stylesheet" href="..." media="print" onload="this.media='all'">绕过阻塞（注意：需确保无 JS 依赖该样式初始化） - Google Fonts 推荐用
<link rel="preload" as="font">+@font-face配合font-display: swap，避免 FOIT - 警惕第三方 CSS 里的
@import——它串行加载，比<link>多一层网络往返
动态加载后仍要防执行时机错乱
用 fetch() + eval() 或 document.createElement('script') 动态注入第三方脚本，确实能绕过初始 HTML 阻塞，但执行时机失控会导致 document.getElementById 找不到元素、window.AMap 未定义等运行时错误。
关键不是“能不能加载”，而是“什么时候能安全用”。
- 不要在
DOMContentLoaded回调里直接调第三方 API——此时脚本可能还没下载完 - 推荐监听
load事件：script.addEventListener('load', () => { initAMap(); }); - 高德地图这类 SDK 提供
onLoad回调（如AMapLoader.load({}).then(() => {...})），必须用它，别自己猜时机 - 多个第三方依赖有先后顺序时（如统计 SDK 要先于客服 SDK 初始化），不能靠
setTimeout，得用 Promise 链或Promise.allSettled
async 的 <script></script>。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
