js 实现预加载效果

2026-01-30 16:13:49JavaScript

使用`<link rel="preload">`实现资源预加载

通过HTML的<link>标签直接声明需要预加载的资源，浏览器会在页面加载早期阶段优先获取这些资源。适合预加载关键CSS、字体、脚本等静态资源。

<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="font.woff2" as="font" crossorigin>

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

利用DOM API动态生成<link>或<script>标签，实现更灵活的预加载逻辑。可监听资源加载状态。

const preloadResource = (url, as) => {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = url;
  link.as = as;
  document.head.appendChild(link);
};
preloadResource('hero-image.webp', 'image');

使用`fetch()`实现数据预请求

对动态数据或API结果进行预获取，利用fetch()的cache控制缓存行为。适合SPA应用的路由级数据预加载。

// 预请求并缓存数据
fetch('/api/data', { cache: 'force-cache' })
  .then(response => response.json())
  .then(data => window.preloadedData = data);

图片预加载技术

通过Image对象提前加载图片资源，避免页面渲染时的延迟。可结合Promise实现批量预加载。

const preloadImages = (urls) => {
  return Promise.all(
    urls.map(url => new Promise((resolve) => {
      const img = new Image();
      img.src = url;
      img.onload = resolve;
    }))
  );
};
preloadImages(['img1.jpg', 'img2.jpg']);

监听`load`事件触发二级预加载

在页面主资源加载完成后，通过window.onload触发非关键资源的延迟预加载，避免阻塞首屏渲染。

window.addEventListener('load', () => {
  // 预加载非首屏需要的资源
  preloadResource('lazy-module.js', 'script');
});

使用`Intersection Observer`实现可视区预加载

对即将进入视口的元素进行资源预加载，适用于懒加载内容的优化。

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      preloadResource(entry.dataset.src, 'image');
      observer.unobserve(entry.target);
    }
  });
});
document.querySelectorAll('[data-src]').forEach(el => observer.observe(el));

Service Worker缓存预加载

通过Service Worker在后台预取并缓存资源，实现离线可用性或二次访问加速。

// Service Worker脚本中
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('precache').then(cache => 
      cache.addAll(['/styles.css', '/app.js'])
    )
  );
});

js 实现预加载效果