首屏更快的关键是提前告知浏览器关键域名和资源：用preconnect预建跨域连接，preload高优拉取首屏必需资源（如CSS、字体、图片），并配合font-display: swap等策略避免阻塞。
想让首屏更快，关键不是等资源“用到时再加载”，而是提前告诉浏览器：哪些域名要连、哪些文件要拿。HTML5 的 <link> 标签通过 Resource Hints（资源提示）机制，能精准控制这个过程——不执行、不阻塞，只预热。
用 preconnect 提前建立跨域连接
当页面要从 CDN、字体服务或 API 域名加载资源时，DNS 解析 + TCP 连接 + TLS 握手可能耗时 300ms 以上。preconnect 比 dns-prefetch 更进一步，直接完成这三步。
- 只对确定会用的第三方域名使用，例如：
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> - 务必加
crossorigin属性（即使同源），否则部分浏览器（如 Safari）会忽略 - 避免滥用：浏览器通常限制并发连接数（约 6 个），过多 preconnect 会抢占主站连接，反而拖慢首屏
- 不要在 preconnect 后立刻发起请求，建议间隔至少 100ms，确保连接真正就绪
用 preload 提前拉取当前页关键资源
preload 是唯一能让浏览器「高优先级发起请求但不执行」的标准方式，适用于首屏必须立即用到的资源。
- CSS 文件：用
as="style"，防止 FOUC（样式闪烁），例如：<link rel="preload" href="main.css" as="style"> - 字体文件：必须同时设
as="font"和crossorigin，否则被忽略，例如：<link rel="preload" href="inter.woff2" as="font" type="font/woff2" crossorigin> - 首屏大图或 poster：用
as="image"，配合fetchpriority="high"（Chrome 支持）进一步提权 - 不推荐盲目 preload script：若脚本没加
async或defer，可能触发重复下载
用 dns-prefetch 作为老浏览器兜底方案
dns-prefetch 只做 DNS 预解析，适合兼容性要求高的场景，但它效果弱于 preconnect，仅用于补充。
立即学习“前端免费学习笔记（深入）”；
- 写在
中，例如：<link rel="dns-prefetch" href="https://cdn.example.com"> - 现代浏览器（Chrome 73+、Firefox 81+、Edge 79+）已全面支持 preconnect，dns-prefetch 可作为降级选项，不必主用
- 无需
crossorigin，也不消耗 TCP 连接数，相对更安全
搭配 font-display 和加载逻辑才真正见效
光 preload 字体还不够——如果 CSS 里没设置 font-display: swap，浏览器仍会阻塞文本渲染（FOIT）。同样，preload 的图片或脚本不会自动插入 DOM 或执行，需后续手动处理。
- 在
@font-face规则中同步设置font-display: swap，实现“先显示后替换” - 避免同一字体地址既写在
@font-face src里，又在外面preload——Safari 等浏览器可能重复请求 - 运行时才确定的关键资源（如设备适配图、AB 实验脚本），可用 JS 动态创建
<link rel="preload">并插入，但要检查是否已存在，防重复
