第三方脚本未加async/defer必阻塞html解析，导致fcp延迟、parse html被截断、document.body为null等；async适用于无依赖脚本，defer适用于需dom操作的脚本；iframe和第三方css同样隐蔽阻塞渲染，须预连接、延迟加载、preload及csp管控。
第三方脚本没加 async/defer 就一定阻塞解析
只要 <script src="xxx.js"></script> 出现在 或 靠前位置，且没带 async 或 defer，浏览器就会暂停 HTML 解析，等它下载、执行完才继续。哪怕脚本内容只有一行 console.log(1)，HTTP 请求本身就会触发阻塞。
常见错误现象包括：FCP（首次内容绘制）严重延迟、Performance 面板里 Parse HTML 蓝条被 Evaluate Script 黄条硬截断、document.body 在脚本中为 null 报错。
-
async适合完全独立、无依赖、不操作 DOM 的脚本，比如umami.js、plausible.js -
defer适合需访问 DOM 但又不想阻塞解析的脚本，比如客服弹窗初始化、表单校验插件 -
async和defer对内联脚本（<script>...</script>）无效，浏览器直接忽略 - 多个
defer脚本按 HTML 中顺序执行；多个async脚本执行顺序不确定，不能有依赖
iframe 默认同步加载，会拖垮主页面渲染流水线
<iframe src="https://third-party.com/widget"></iframe> 是隐形的阻塞源——它不仅自己要走完整 DNS/TCP/TLS 流程，还会让浏览器等待其 contentDocument ready 才推进主页面的 DOMContentLoaded，尤其在移动端，首屏白屏常由此引发。
真正有效的做法是延迟加载：先不设 src，用占位元素撑开空间，等用户滚动接近可视区域再注入。
- 用
IntersectionObserver监听进入视口，比scroll事件更轻量、更可靠 - 动态创建
<iframe></iframe>并设置sandbox="allow-scripts"，隔离第三方 JS 环境 - 必须加
onerror处理，防止加载失败导致空白或布局塌陷 -
loading="lazy"在 Chrome 76+ 支持，但 Safari 直到 iOS 16.4 才支持，生产环境建议降级为 JS 控制
第三方 CSS 和 @import 比 JS 更隐蔽地阻塞渲染
很多人只盯着 JS，却忽略第三方样式表才是首屏最大“静默杀手”。<link rel="stylesheet" href="https://cdn.thirdparty.com/style.css"> 一旦出现在 ，浏览器就会阻塞渲染，直到该 CSS 下载、解析完毕——哪怕它只用于折叠面板或后台页。
@import 更危险：它永远阻塞、无法被 preload、且嵌套层级越深，阻塞链越长。
- 禁用
@import，全部改用<link>标签 - 非关键第三方 CSS 用
media="print"初始化，加载完成后再 JS 切换为media="all" - 关键第三方 CSS（如地图 SDK 样式）用
<link rel="preload" as="style" href="...">提前拉取 -
async/defer对<link rel="stylesheet">无效，浏览器直接忽略
预连接和 CSP 白名单不是可选项，而是兜底防线
光靠 async 不解决网络握手耗时。第三方域名未 preconnect，移动端首次请求 DNS + TLS 动辄 400–900ms，这部分时间根本不在 JS 执行里，Performance 面板也看不到，但真实拖慢 FCP。
CSP 不只是防 XSS，更是资源加载的“交通管制”——没进白名单的域名，连请求都发不出去，自然不会卡住主线程。
-
<link rel="preconnect" href="https://cdn.thirdparty.com">放在最顶部，最多 3–4 个关键域名 - CSP 中只写明确需要的第三方域名，避免用通配符
*或宽泛子域（如https://*.cdn.com） - 配合
rel="preload"加载首屏必需的第三方资源（如字体、配置 JSON），但 preload 后必须手动插入或切换 media - 所有外链资源必须用协议相对路径（
//cdn.xxx.com/sdk.js），否则 HTTPS 页面加载 HTTP 资源会被拦截
async，而是没做执行隔离和超时兜底——一个没 catch 的 document.write() 或无限循环，就能让整个页面卡死，且 DevTools 很难定位。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
