如何通过link标签和rel属性优化加载

合理使用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=”https://www.php.cn/faq/font.woff2″ as=”font” type=”font/woff2″ crossorigin>

预连接外部域名（rel=”preconnect” 和 rel=”dns-prefetch”）

提前建立与第三方服务器的连接，减少跨域请求的延迟。

• rel=”preconnect”：建立完整的 TCP + TLS 连接，适合确定会请求资源的域名
• rel=”dns-prefetch”：仅解析 DNS，开销更小，可作为兜底方案

建议对 CDN、字体服务、API 域名使用：

<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=”https://www.php.cn/js/about.js” as=”script”>

避免滥用，防止资源浪费

错误使用 rel 属性反而会加重负载，降低性能。

• 不要预加载大量非关键资源，挤占重要请求带宽
• 确保 as 类型准确，否则可能引发重复请求
• 跨域资源需注意 CORS 配置，特别是字体文件

基本上就这些。合理搭配 preload、preconnect 和 prefetch，能有效缩短加载时间，提升用户体验。关键是根据实际路径和资源依赖做精准控制，不复杂但容易忽略细节。