js预加载资源技巧

2026-05-10 19:00:34 659阅读 0评论

别让页面“转圈”：那些真正能提速的 JS 预加载实战技巧

用户打开页面时，盯着那个加载动画等得心里发毛，这种体验谁都不想要。很多时候我们以为用了 CDN 就万事大吉，却忽略了浏览器渲染机制里的“空窗期”。真正的性能优化，往往藏在资源调度的细节里。今天不聊虚的理论，直接看看如何用 JavaScript 在运行时更灵活地预加载关键资源。

为什么静态标签不够用？

传统的 <link rel="preload"> 确实好用，但它有一个硬伤：写死在 HTML 里了。如果你的业务逻辑是动态决定某个资源是否需要的，比如根据用户权限显示不同皮肤，或者某些模块仅在特定操作后才触发，静态标签就会变成浪费带宽的“摆设”。

这时候就需要让 JS 介入。你可以在运行时检测条件，再决定是否插入预加载指令。这相当于把调度权从构建时拿到了运行中。

function preloadResource(url, type) {
  const link = document.createElement('link');
  link.rel = 'preload';
  link.href = url;
  link.as = type; // 可以是 script, style, image, font
  // 确保只在未存在时添加，避免重复请求
  if (!document.querySelector(`[href="${url}"]`)) {
    document.head.appendChild(link);
  }
}
// 在用户点击按钮前，提前加载下一个页面的核心样式
button.addEventListener('click', () => {
  preloadResource('/css/detail.css', 'style');
});

这段代码的关键在于 addEventListener 和动态创建节点的结合。不要等到跳转发生才去请求资源，在交互发生的瞬间提前发出信号，能让浏览器的网络队列更早处理该任务。

图片加载：精准狙击而非地毯式轰炸

对于长列表或瀑布流页面，把所有即将滚入视口的图片都标记为 preload 是不可取的。浏览器并发连接数有限，抢占了关键资源的带宽反而会导致主图变慢。

更聪明的做法是利用 Intersection Observer API。它不仅能做懒加载，还能用来做“前瞻性预加载”。当用户滚动到距离目标元素还有两个屏幕的位置时，再悄悄加载下一级图片。

const observerOptions = { rootMargin: '200px' ；threshold: 0 };
// 这里的 200px 就是缓冲带，给用户留出反应时间
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.url;
      // 同时可以预加载相邻的图片链接
      observer.unobserve(entry.target);
    }
  });
}, observerOptions);

这个方案的核心逻辑是控制节奏。通过调整 rootMargin，你可以精确控制预加载的时机。设得太短，网络波动时会看到白块；设得太长，又可能占满网速。建议结合用户的网络类型（navigator.connection.effectiveType）动态调整策略。