js 实现预加载

2026-04-04 00:25:35JavaScript

使用 link 标签预加载资源

在 HTML 的 <head> 部分添加 <link rel="preload"> 标签，可以提前加载关键资源如脚本、样式或字体。这种方式适用于已知需要优先加载的资源。

<link rel="preload" href="critical.js" as="script">
<link rel="preload" href="font.woff2" as="font" crossorigin>

as 属性指定资源类型，确保浏览器正确优先级和请求头。跨域资源需添加 crossorigin 属性。

通过 JavaScript 动态创建元素

通过 JavaScript 动态创建 <link> 或 <script> 标签，实现资源的预加载。适用于需要条件触发的场景。

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

preloadResource('lazy-module.js', 'script');

使用 Fetch API 提前请求数据

通过 Fetch API 发起请求缓存数据，适用于需要提前获取但非立即使用的数据。注意需处理跨域和缓存策略。

fetch('/api/data', { 
  method: 'GET',
  cache: 'force-cache' 
})
  .then(response => response.json())
  .then(data => window.preloadedData = data);

图片预加载技术

对于图片资源，可创建隐藏的 <img> 元素或使用 Image 对象提前加载。适用于画廊或轮播图等场景。

const preloadImages = (urls) => {
  urls.forEach(url => {
    const img = new Image();
    img.src = url;
  });
};

preloadImages(['image1.jpg', 'image2.jpg']);

利用 Service Worker 缓存资源

通过 Service Worker 在安装阶段缓存关键资源，实现离线可用性和重复访问加速。适合 PWA 应用。

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then(cache => {
      return cache.addAll([
        '/styles/main.css',
        '/scripts/app.js'
      ]);
    })
  );
});

监控预加载效果

通过 PerformanceObserver 或 resourceTiming API 分析预加载效果，优化关键路径。

js 实现预加载

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    console.log(`Resource: ${entry.name}, Load time: ${entry.duration}ms`);
  });
});
observer.observe({ type: 'resource', buffered: true });