合理使用link标签的rel属性可显著提升页面加载性能。1. 通过rel="preload"预加载关键资源（如字体、css、js），需配合as属性指定类型，确保高优先级资源尽早加载；2. 使用rel="preconnect"提前建立第三方服务器的TCP+TLS连接，或用rel="dns-prefetch"仅解析DNS，减少跨域请求延迟；3. 利用rel="prefetch"在空闲时预载后续可能需要的资源，或用rel="prerender"预渲染整页（慎用）；4. 避免滥用，防止带宽挤占和重复请求，注意CORS配置。精准控制资源加载策略，能有效优化性能。
使用 link 标签结合 rel 属性，不仅能正确引入资源，还能显著提升页面加载性能。关键在于合理利用浏览器的预加载机制和资源优先级调度。以下是几种实用优化策略。
预加载关键资源（rel="preload"）
通过 rel="preload" 告诉浏览器某些资源对当前页面至关重要，应尽早开始加载，避免阻塞渲染。
- 适用于字体、关键 CSS、JS 或背景图片等高优先级资源
- 必须配合 as 属性指定资源类型，帮助浏览器正确设置请求优先级
示例：预加载自定义字体
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
预连接外部域名（rel="preconnect" 和 rel="dns-prefetch"）
提前建立与第三方服务器的连接，减少跨域请求的延迟。
- rel="preconnect"：建立完整的 TCP + TLS 连接，适合确定会请求资源的域名
- rel="dns-prefetch"：仅解析 DNS，开销更小，可作为兜底方案
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://api.example.com">
智能预获取未来可能用到的资源（rel="prefetch" 和 rel="prerender"）
利用用户空闲时间加载后续可能需要的资源，实现更快跳转。
- rel="prefetch"：预加载静态资源（如 JS、CSS），常用于下一页依赖
- rel="prerender"：完整渲染整个页面（慎用，消耗较多资源）
示例：预测用户将访问“about”页
<link rel="prefetch" href="/js/about.js" as="script">
避免滥用，防止资源浪费
错误使用 rel 属性反而会加重负载，降低性能。
- 不要预加载大量非关键资源，挤占重要请求带宽
- 确保 as 类型准确，否则可能引发重复请求
- 跨域资源需注意 CORS 配置，特别是字体文件
基本上就这些。合理搭配 preload、preconnect 和 prefetch，能有效缩短加载时间，提升用户体验。关键是根据实际路径和资源依赖做精准控制，不复杂但容易忽略细节。