智能预加载技术实战与性能优化经验分享

为什么我决定对比这几种智能预加载方案

最近在优化一个单页应用的性能，用户反馈说页面切换的时候总有点卡顿。分析了一下，主要问题出在资源加载上，尤其是图片和第三方组件库的按需加载部分。于是我想到了智能预加载这个老生常谈的技术点。

市面上常用的方案主要有三种：IntersectionObserver、prefetch/prefetchDNS 和 基于路由的预加载策略。这些方案我都用过，各有优劣，今天就来聊聊我的使用心得。

谁更灵活？谁更省事？

先来说说 IntersectionObserver 这个API，我比较喜欢用它来处理图片懒加载和视口外的组件预加载。代码写起来很简单：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // 真实图片地址
      observer.unobserve(img); // 加载后停止观察
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => {
  observer.observe(img);
});

这种方式的好处是完全基于浏览器原生能力，不需要引入额外的库。而且它的灵活性很高，可以根据元素进入视口的比例来决定是否加载资源。

但这里有个大坑提醒：不同浏览器对IntersectionObserver的支持程度不一样，尤其是老版本iOS Safari。我曾经在这个问题上折腾了两天，最后不得不加了个polyfill。

性能对比：差距比我想象的大

再来看看 prefetch 和 prefetchDNS，这两个其实更适合做静态资源的预加载。代码也很简单：

<link rel="prefetch" href="https://jztheme.com/assets/large-image.jpg" as="image">
<link rel="dns-prefetch" href="https://jztheme.com">

我个人觉得这种方案最适合那种有明确预加载需求的场景，比如知道用户下一步肯定会访问某个页面或下载某个资源。prefetchDNS特别适合CDN域名比较多的情况，能显著减少DNS解析时间。

不过这里要吐槽的是，prefetch有时候会抢占带宽，导致当前页面的资源加载变慢。特别是在移动端，这个问题更明显。我建议最好配合网络状态检测一起使用。

基于路由的预加载策略

第三种方案是我最近项目里用得最多的——基于路由的预加载。以Vue为例：

const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: () => import(/* webpackPrefetch: true */ './About.vue')
    }
  ]
});

这个方案的最大优势是和框架深度集成，用起来特别省心。webpack会在空闲时间自动帮你预加载对应的chunk文件。不过要注意的是，如果预加载的组件太多，反而会造成资源浪费。

踩过的坑：有些同学喜欢把所有路由都加上prefetch，结果发现首屏加载时间反而变长了。所以我的建议是，只对核心路由做预加载，其他还是按需加载比较好。

我的选型逻辑

总结一下我的选择标准：

• 如果要做图片懒加载或者组件延迟渲染，我首选IntersectionObserver
• 对于静态资源或者CDN域名，我会用prefetch和prefetchDNS
• 在SPA应用中，基于路由的预加载是最省心的选择

当然，实际情况往往需要组合使用。比如在我的项目里，我就同时用了IntersectionObserver做图片懒加载，配合路由预加载来做页面切换优化。

以上是我的对比总结

智能预加载这个话题其实挺大的，不同场景下的最佳实践可能都不一样。像我最近就在研究如何结合用户的操作习惯来做更智能的预加载决策，这部分还在实验阶段。

以上就是我个人对这几个预加载方案的完整讲解，有更优的实现方式欢迎评论区交流。特别是如果你有遇到过什么奇葩的兼容性问题，或者有什么独特的优化思路，都可以留言讨论。