资源预加载(preload/prefetch)技术

作者：陈川阅读数：11398人阅读分类：性能优化

资源预加载(preload/prefetch)技术概述

资源预加载是一种提前获取关键资源的策略，通过浏览器空闲时间预先加载后续可能需要的资源，从而减少用户等待时间。preload和prefetch是两种核心实现方式，前者针对当前页面关键资源，后者针对未来导航可能用到的资源。

preload的工作原理与使用场景

preload通过<link rel="preload">指令强制浏览器立即获取指定资源，优先级通常高于普通资源加载。它适用于当前渲染路径中确定需要的资源，尤其是那些被CSS、JavaScript动态请求但早期未被发现的资源。

典型使用场景包括：

首屏关键字体文件
首屏大型背景图
关键路径上的异步脚本
视频海报图

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

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

<!-- 预加载英雄区域图片 -->
<link rel="preload" href="hero-image.webp" as="image" media="(min-width: 800px)">

prefetch的机制与应用场景

prefetch(<link rel="prefetch">)指示浏览器在空闲时获取未来可能需要的资源，优先级较低。适用于预测用户下一步操作所需的资源，如分页内容、弹窗资源或下一页面的核心资源。

常见应用场景：

电商网站的产品详情页图片
单页应用的下一路由组件
用户悬停时预加载下拉菜单资源

<!-- 预取下一页资源 -->
<link rel="prefetch" href="page-2.html" as="document">

<!-- 预取可能需要的脚本 -->
<link rel="prefetch" href="modal.js" as="script">

<!-- DNS预取加速跨域请求 -->
<link rel="dns-prefetch" href="//cdn.example.com">

技术实现细节与注意事项

资源优先级控制

浏览器基于资源类型分配默认优先级：

CSS/字体：Highest
脚本：High/Medium
图片：Low

通过as属性显式声明资源类型可确保正确优先级：

<link rel="preload" href="slider.js" as="script">

跨域资源处理

加载跨域资源需设置crossorigin属性，尤其是字体和脚本：

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

响应式预加载

配合media属性实现条件预加载：

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

实际性能优化案例

案例一：字体闪烁问题解决

未优化前：

@font-face {
  font-family: 'CustomFont';
  src: url('custom.woff2') format('woff2');
}

优化方案：

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

案例二：单页应用路由预加载

React应用示例：

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const ProductPage = () => {
  const router = useRouter();
  
  useEffect(() => {
    // 鼠标悬停时预加载结账页面资源
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = '/checkout';
    document.head.appendChild(link);
  }, []);

  return <div>Product Content</div>;
}

浏览器兼容性与回退策略

主流浏览器支持情况：

preload: Chrome 50+, Firefox 56+, Edge 17+
prefetch: 广泛支持包括IE11

特性检测方案：

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

if (isPreloadSupported()) {
  // 使用preload
} else {
  // 回退方案：XHR预加载或懒加载
}

监控与效果评估

使用Resource Timing API测量预加载效果：

const measurePreload = (resourceUrl) => {
  const entries = performance.getEntriesByName(resourceUrl);
  if (entries.length > 0) {
    const entry = entries[0];
    console.log(`加载耗时: ${entry.duration.toFixed(2)}ms`);
    console.log(`启动时间: ${entry.startTime.toFixed(2)}ms`);
    console.log(`是否缓存命中: ${entry.transferSize === 0}`);
  }
};

// 检查预加载的字体文件
measurePreload('https://example.com/font.woff2');

高级应用模式

基于用户行为的动态预加载

document.addEventListener('mouseover', (e) => {
  if (e.target.matches('.product-thumbnail')) {
    const productId = e.target.dataset.id;
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = `/products/${productId}/details.json`;
    document.head.appendChild(link);
  }
});

Service Worker中的预加载策略

// sw.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('preload-cache').then((cache) => {
      return cache.addAll([
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.svg'
      ]);
    })
  );
});

常见误区与最佳实践

需要避免的错误

过度预加载非关键资源

<!-- 错误示例：预加载所有可能用到的图标 -->
<link rel="preload" href="icon-1.png" as="image">
<link rel="preload" href="icon-2.png" as="image">
<!-- ... -->

忽略缓存策略

# 需确保预加载资源设置合适缓存头
Cache-Control: public, max-age=31536000, immutable

与其他优化技术的配合

与HTTP/2 Server Push协同

# nginx配置示例
http2_push_preload on;
location = /styles.css {
  http2_push /fonts/Inter.woff2;
}

和懒加载互补实现

<!-- 首屏图片预加载 -->
<link rel="preload" href="hero.jpg" as="image">

<!-- 非首屏图片懒加载 -->
<img data-src="product.jpg" loading="lazy" class="lazyload">
<script>
  document.addEventListener('DOMContentLoaded', () => {
    if ('IntersectionObserver' in window) {
      const lazyImages = [].slice.call(document.querySelectorAll('img.lazyload'));
      const imageObserver = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            imageObserver.unobserve(img);
          }
        });
      });
      lazyImages.forEach((img) => imageObserver.observe(img));
    }
  });
</script>

做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：HTTP/2和HTTP/3的优势与应用

下一篇：域名分片(Domain Sharding)策略