关键路径不被第三方脚本拖慢的核心是“不阻塞解析、不阻塞渲染、按需加载”，需结合加载时机、执行隔离和资源优先级设计，分级管控脚本用途。
关键路径不被第三方脚本拖慢，核心是“不阻塞解析、不阻塞渲染、按需加载”。不是简单加async或defer就能解决，得结合加载时机、执行隔离和资源优先级来设计。
延迟加载非首屏必需的第三方脚本
很多第三方脚本（如统计、客服、广告、A/B测试）并不影响首屏内容呈现，应推迟到页面交互稳定后再加载。
- 用
document.addEventListener('DOMContentLoaded', ...)或setTimeout(..., 0)延后触发加载逻辑 - 更稳妥的做法是监听
visibilitychange事件，在页面可见且空闲时（配合requestIdleCallback）再加载 - 避免在
<head>中直接写<script src="xxx">，统一由 JS 动态创建script标签并控制插入时机
使用async + onload确保无依赖脚本不干扰解析
对彼此无依赖、也不依赖页面 DOM/JS 状态的脚本（如独立埋点 SDK），async是最轻量的方案。
- 动态创建 script 标签后显式设置
async = true，并用onload回调处理初始化逻辑 - 避免在
onload里访问尚未就绪的全局对象（如window.dataLayer未定义），先做存在性判断 - 慎用
defer：它虽保证执行顺序，但会等待整个 HTML 解析完成，对首屏无帮助，且可能因排队延长执行时间
沙箱化执行，隔离副作用与错误
第三方脚本常自带全局污染、同步阻塞、异常崩溃等问题。不能让它牵连主站稳定性。
立即学习“Java免费学习笔记（深入）”；
- 用
iframe sandbox加载纯展示类脚本（如某些广告、富文本编辑器），完全隔离 JS 执行环境 - 对必须在主文档运行的脚本，包裹在
try/catch中，并重写console.error和window.onerror做兜底捕获 - 限制执行超时：用
setTimeout包装初始化函数，超时则中断并标记失败，防止死循环或长任务卡住主线程
预连接与资源提示提升加载效率
第三方域名 DNS 查询、TCP 握手、TLS 协商都会增加延迟，尤其在移动端明显。
- 在
<head>中添加<link rel="preconnect" href="https://cdn.example.com">，提前建立连接 - 对关键第三方资源（如首屏所需的字体、配置 JSON），用
rel="preload"提示浏览器高优获取 - 避免预连接过多域名（一般不超过 3–4 个），否则反而增加竞争开销
真正有效的方案不是堆砌技术关键词，而是根据脚本用途分级：哪些可删、哪些可懒、哪些必须保、哪些该锁。控制权始终在自己手里，而不是交给第三方的一行script标签。
