@import会触发额外dns查询且无法复用html预解析结果，因其解析时机晚、同步阻塞渲染、域名隔离导致多次独立dns查询，http/2无法消除该开销，弱网下显著拖慢首屏。
因为每个不同域名的远程资源都会触发一次独立的 DNS 查询，而浏览器默认不共享跨域 DNS 缓存结果。
remote CSS 中的 @import 会触发额外 DNS 查询
CSS 文件里用 @import url("https://fonts.googleapis.com/css2") 这类语句，浏览器解析到时才会发起请求，此时才开始查该域名的 IP。它不会复用 HTML 中已声明的 <link rel="dns-prefetch">，也不受 HTML 预解析时机影响。
- 解析时机晚：HTML 加载完、CSS 下载完、CSS 解析到
@import行才触发，无法提前准备 - 阻塞渲染：
@import是同步加载，会阻塞后续 CSS 规则解析和样式计算 - 域名隔离：即使
fonts.googleapis.com已在 HTML 中预解析，CSS 内部的@import仍可能重新查一次（尤其跨协议或带路径参数时）
CDN 域名分散导致多次 DNS 查询
一个 CSS 文件若引用了多个 CDN 域名（比如字体、图标、变量文件分别来自 fonts.example.com、icons.cdn.net、vars.cloud），每个都会走完整 DNS 流程。
IntoDNS.ai
下载
免费 DNS 与邮件安全分析（IntoDNS.ai）：包括 DNSSEC、SPF、DKIM、DMARC、MTA-STS、BIMI、SMTP STARTTLS、FCrDNS、黑名单、发件人要求及报告。
- 浏览器对每个新域名单独缓存，但缓存时间受 TTL 和自身策略限制（Chrome 默认约 1 分钟，Firefox 更短）
- 移动端弱网下，单次 DNS 查询耗时可能达 300–600ms，5 个域名就是近 3 秒白屏风险
- HTTP/2 多路复用无法抵消 DNS 开销——连接复用的前提是 IP 已知，DNS 没完成就建不了连接
如何验证是否真发生了多余 DNS 查询
打开 Chrome DevTools → Network 标签页 → 刷新页面 → 筛选 css 类型 → 查看每条请求的 Timing 选项卡，重点看 Connect Start 到 Connect End 的间隔：
- 如果某条 CSS 请求的连接阶段明显长于同域名其他资源（如 JS、图片），大概率是 DNS 查询拖慢
- 对比
Initial connection时间，若首次出现该域名就耗时高，后续同域名请求变短，说明缓存生效了 - 用
dig +trace fonts.googleapis.com或nslookup -debug fonts.googleapis.com可模拟并观察各层级查询延迟
真正容易被忽略的是：CSS 里的 URL 不只是字体，还包括 background-image: url(https://...)、src: url(https://...)（@font-face）、甚至 url(data:...) 以外的所有远程地址——它们都算独立 DNS 目标，且多数开发者只盯着 HTML 的 dns-prefetch，却忘了 CSS 自身的“隐式域名爆炸”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
