资源预加载（'<link rel="preload">'）

作者：陈川阅读数：61000人阅读分类： HTML

资源预加载（'<link rel="preload">'）

资源预加载是一种优化网页性能的技术，允许浏览器提前获取关键资源，减少用户等待时间。通过<link rel="preload">，开发者可以明确告诉浏览器哪些资源需要优先加载，从而提升页面渲染速度。

基本语法与工作原理

<link rel="preload">的基本语法如下：

<link rel="preload" href="resource-url" as="resource-type">

浏览器在解析HTML时遇到预加载指令，会立即开始下载指定资源，但不会执行或应用它。资源下载完成后会被缓存，等到实际需要时才使用。这种方式特别适合字体、关键CSS/JS、大型图片等资源的提前加载。

资源类型与as属性

as属性用于指定资源类型，帮助浏览器设置正确的优先级和请求头。常见类型包括：

script：JavaScript文件
style：CSS文件
font：字体文件
image：图片文件
audio：音频文件
video：视频文件
fetch：通过fetch或XHR请求的资源

示例：

<!-- 预加载CSS -->
<link rel="preload" href="critical.css" as="style">

<!-- 预加载字体 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预加载图片 -->
<link rel="preload" href="hero-image.webp" as="image" type="image/webp">

跨域资源处理

当预加载跨域资源时，必须正确设置crossorigin属性，尤其是字体文件：

<link rel="preload" href="https://other-domain.com/font.woff2" as="font" crossorigin>

如果资源是匿名模式获取的，可以明确指定：

<link rel="preload" href="font.woff2" as="font" crossorigin="anonymous">

媒体查询与响应式预加载

可以结合媒体查询实现响应式资源预加载：

<link rel="preload" href="large-image.jpg" as="image" media="(min-width: 800px)">
<link rel="preload" href="small-image.jpg" as="image" media="(max-width: 799px)">

浏览器会根据当前视口宽度决定加载哪个资源。

脚本与模块预加载

对于JavaScript文件，可以预加载普通脚本或模块：

<!-- 预加载传统脚本 -->
<link rel="preload" href="app.js" as="script">

<!-- 预加载ES模块 -->
<link rel="modulepreload" href="app.mjs">

modulepreload专门用于预加载ES模块及其依赖。

实际应用场景

关键CSS预加载

<head>
  <link rel="preload" href="critical.css" as="style">
  <!-- 其他head内容 -->
  <link rel="stylesheet" href="critical.css">
</head>

字体预加载避免FOIT

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('font.woff2') format('woff2');
  }
</style>

图片懒加载配合预加载

<link rel="preload" href="hero-image.webp" as="image">
<img src="hero-image.webp" loading="lazy" alt="Hero Image">

性能考量与最佳实践

只预加载关键资源：过度使用会浪费带宽
尽早声明：预加载标签应放在HTML头部
类型匹配：确保as属性与实际使用类型一致
监控效果：使用Chrome DevTools的Performance面板验证
回退方案：考虑不支持预加载的浏览器

<script>
  if (!('relList' in document.createElement('link')) {
    // 不支持预加载时的polyfill
    const preloadLinks = document.querySelectorAll('link[rel="preload"]');
    preloadLinks.forEach(link => {
      const as = link.getAttribute('as');
      if (as === 'script') {
        const script = document.createElement('script');
        script.src = link.href;
        document.body.appendChild(script);
      }
      // 其他资源类型处理...
    });
  }
</script>

与其他预加载技术的比较

prefetch：用于可能需要的未来导航资源
preconnect：提前建立连接但不获取资源
dns-prefetch：仅解析DNS

<!-- 预加载当前页面资源 -->
<link rel="preload" href="critical.js" as="script">

<!-- 预取下一页可能需要的资源 -->
<link rel="prefetch" href="next-page.js" as="script">

<!-- 提前建立第三方源连接 -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 提前DNS解析 -->
<link rel="dns-prefetch" href="https://cdn.example.com">

动态预加载技术

可以通过JavaScript动态创建预加载标签：

function preloadResource(url, type) {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = url;
  link.as = type;
  if (type === 'font') {
    link.crossOrigin = '';
  }
  document.head.appendChild(link);
}

// 使用示例
preloadResource('dynamic-image.jpg', 'image');

HTTP头实现预加载

除了HTML标签，还可以通过HTTP头实现预加载：

Link: </critical.css>; rel=preload; as=style

这在不能修改HTML时特别有用，可以通过服务器配置实现。

浏览器支持与特性检测

现代浏览器普遍支持预加载，但可以通过以下代码检测：

const isPreloadSupported = () => {
  const link = document.createElement('link');
  return link.relList && link.relList.supports && link.relList.supports('preload');
};

if (isPreloadSupported()) {
  // 使用预加载
} else {
  // 备用方案
}

预加载与缓存策略

预加载资源遵循常规缓存规则，可以通过Cache-Control头控制：

Cache-Control: public, max-age=31536000, immutable

对于频繁更新的资源，应考虑使用版本控制或唯一文件名：

<link rel="preload" href="app.123abc.js" as="script">

预加载的优先级控制

浏览器会根据资源类型分配不同优先级：

CSS/字体：最高优先级
视口内图片：高优先级
脚本：中高优先级
音频/视频：低优先级

可以通过fetchpriority属性调整：

<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

预加载错误处理

可以监听预加载资源的加载情况：

const preloadLinks = document.querySelectorAll('link[rel="preload"]');
preloadLinks.forEach(link => {
  link.addEventListener('load', () => {
    console.log(`${link.href} 预加载完成`);
  });
  link.addEventListener('error', () => {
    console.error(`${link.href} 预加载失败`);
  });
});

预加载与Web字体优化组合

完整优化方案示例：

<head>
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  <style>
    @font-face {
      font-family: 'CustomFont';
      src: url('font.woff2') format('woff2');
      font-display: swap;
    }
    body {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>

预加载对LCP的影响

预加载关键元素可以显著改善LCP（最大内容绘制）指标：

<!-- 预加载LCP候选图片 -->
<link rel="preload" href="hero-image.webp" as="image" fetchpriority="high">

服务端渲染中的预加载

在SSR框架中，可以自动生成预加载标签：

// Next.js示例
import Head from 'next/head';

function MyPage() {
  return (
    <>
      <Head>
        <link rel="preload" href="/critical.css" as="style" />
      </Head>
      {/* 页面内容 */}
    </>
  );
}