dns预解析（dns-prefetch）仅提前解析域名，开销小、不占连接数，适用于可能使用的跨域域名；预连接（preconnect）则完成dns+tcp+tls全过程，适合1–2秒内必用的关键跨域资源，二者不可混用同一域名，且必须置于head靠前位置、格式严格合规。
明确用途：DNS预解析只查域名，预连接真建连接
两者目标相似，但动作深度不同：
- dns-prefetch：仅触发DNS查询，把域名转成IP地址这一步提前做完。开销极小，不占TCP连接数，适合“可能用到”或兼容性要求高的场景。
- preconnect：直接完成DNS + TCP握手 + TLS协商三步，相当于把连接“热好”了，就等发请求。开销大，占用浏览器并发连接槽位（通常最多6个），只适合确定马上要用的关键跨域资源。
写法必须精准，错一个字符就失效
浏览器对格式极其严格，且不报错、不提醒，写错等于没写：
- ✅ 正确：
<link rel="dns-prefetch" href="//cdn.example.com">或<link rel="dns-prefetch" href="https://fonts.googleapis.com"> - ❌ 错误：
href="https://cdn.example.com/js/app.js"（含路径）、href="cdn.example.com"（缺协议标识）、href="//fonts.gstatic.com:443"（带端口）——整个标签被静默忽略。 - ⚠️ 注意：
//fonts.googleapis.com和//fonts.gstatic.com是两个独立域名，不能互相替代；也不支持通配符如//*.example.com。
位置决定是否生效，靠前才有意义
浏览器是流式解析HTML的，dns-prefetch 和 preconnect 标签一旦被读到就立即排队执行。如果放晚了，资源请求早就发出去了：
- ✅ 理想位置：
<meta charset>和<title></title>之后、首个<link rel="stylesheet">或<script></script>之前。 - ❌ 无效位置：塞在
里、包裹在<template></template>中、或用 JS 动态创建插入（document.createElement('link')）。 - ⚠️ Safari 更保守，若标签排在大量CSS/JS后面，可能延迟到空闲时才执行，优先级被抢占。
选哪个？看资源使用节奏和确定性
别混用同一域名，preconnect 会覆盖 dns-prefetch，后者纯属冗余：
- 用 preconnect 的情况：
— 页面一定会从该域名加载关键资源（如https://fonts.googleapis.com加载字体CSS，或 CDN 上的首屏JS/CSS）；
— 目标支持HTTPS且你确认它会在1–2秒内被请求；
— 必须带上crossorigin属性，否则 Safari 会忽略（例如：<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>）。 - 用 dns-prefetch 的情况：
— 域名只是“可能用到”（如分享按钮调用的微博接口）；
— 目标只支持HTTP（preconnect在TLS阶段会失败）；
— 需要兼容老版 Safari 或 IE；
— 同源或子域不用加（浏览器自动复用连接和DNS缓存）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
