第三方脚本未加async/defer必阻塞HTML解析，导致document.body为null、FCP延迟、Parse HTML被Evaluate Script截断；客服脚本需DOMContentLoaded后初始化，统计脚本应按首屏/交互分策略加载。
第三方脚本没加 async/defer 就一定阻塞 HTML 解析
浏览器遇到没有 async 或 defer 的 <script src="xxx.js"></script>，会立刻暂停 HTML 解析，等它下载、执行完才继续——这不是“可能卡”，而是规范强制行为。
常见错误现象包括：document.body is null 报错、FCP（首次内容绘制）延迟超 2s、Performance 面板中蓝色 Parse HTML 条被黄色 Evaluate Script 硬生生截断。
- 客服类脚本（如美洽、Udesk）必须操作 DOM，用
async极易触发Cannot read property 'appendChild' of null - 统计脚本（如 Plausible、Umami）若用
defer，虽能保序，但首屏埋点可能错过用户点击 -
async和defer对内联脚本（<script>console.log(1)</script>）完全无效，浏览器直接忽略
客服脚本初始化必须等 DOMContentLoaded，不能靠 script 标签位置
很多客服 SDK（比如早期 Udesk、快商通）在脚本内立即访问 document.body 或调用 new Widget()，但此时 HTML 可能还没解析完。把 script 放到 <body> 底部不是解法——async 加载下仍可能抢跑。
正确做法是主动控制执行时机：
立即学习“前端免费学习笔记（深入）”；
- 用
document.addEventListener('DOMContentLoaded', () => { initWidget(); })包裹初始化逻辑 - 优先使用 SDK 提供的就绪回调，例如
LiveChatWidget.on('ready', handler)或UdeskWidget.ready(callback) - 避免在
<head>中同步加载；哪怕加了async，也不能保证 DOM 就绪
占位容器 + defer 是客服弹窗最稳的挂载模式
直接插入第三方 script 标签，容易因 DOM 未就绪或样式缺失导致白屏、错位、按钮不可点。必须拆成两步：先占位，再加载。
示例结构：
<div id="kf-chat-container" style="height: 0; overflow: hidden;"></div> <script src="https://cdn.kf.com/widget.js" defer></script>
关键点：
- 占位容器不带内容、不设宽高（或设为
height: 0），只预留挂载点 - 脚本加
defer，确保 DOM 解析完成后再执行 - SDK 初始化函数里显式指定挂载节点：
init({ container: '#kf-chat-container' }) - 若脚本依赖特定 CSS，需提前用
<link rel="preload" as="style">拉取，而非靠 @import
统计脚本要区分首屏与后续行为，不能一概 defer
统计目标不同，加载策略必须分化：首屏曝光类（PV、UV）需要在 DOMContentLoaded 前尽可能早触发；用户交互类（click、scroll）则可稍晚。
推荐组合：
- PV 统计：用
<script>内联最小化代码（如fetch('/log?pv=1', { keepalive: true })），不依赖外部资源 - 行为统计：动态创建 script 元素，监听
visibilitychange，页面真正可见后再加载完整 SDK - 对
umami.js这类无 DOM 依赖的脚本，用async是合理选择，但必须确认它不读取window.location等未就绪属性
最常被跳过的是预连接——就算用了 async，第三方域名的 DNS 查询 + TLS 协商也要 300–800ms。务必在 <head> 加 <link rel="preconnect" href="https://analytics.example.com">。
