如何实现一个前端资源预加载与懒加载策略？

实现前端资源预加载与懒加载策略需结合浏览器机制和现代API，通过预加载关键资源、懒加载非首屏内容，并动态管理加载优先级，以平衡首屏速度与用户体验。

预加载的核心是提前获取首屏渲染必需的资源，避免主线程阻塞。

• <link rel="preload">通过声明式标签强制浏览器优先加载关键资源（如字体、CSS、JS）。

  示例：加载自定义字体防止文本闪烁。<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

  适用场景：首屏渲染依赖的CSS、JS或字体文件。

• DNS解析与连接优化

  dns-prefetch：提前解析第三方域名（如CDN、API）的DNS，减少首次请求延迟。<link rel="dns-prefetch" href="

  https://cdn.example.com">

  preconnect：直接建立与第三方服务器的TCP/TLS连接，跳过握手阶段。<link rel="preconnect" href="

  https://api.example.com"
  crossorigin>

• prefetch（空闲时预取）在浏览器空闲时预加载用户可能访问的后续资源（如下一页的JS模块）。

  示例：预取SPA路由对应的JS文件。<link rel="prefetch" href="/next-page.js" as="script">

  适用场景：用户行为可预测的路径（如电商商品详情页的“加入购物车”按钮）。

非首屏内容应延迟加载，直到用户滚动至可视区域。

• 原生图片懒加载使用loading="lazy"属性（现代浏览器原生支持），无需额外脚本。

  <img src="image.jpg" loading="lazy" alt="Description">

• 自定义懒加载逻辑（Intersection Observer API）通过监听元素与视口的交叉状态，动态加载资源。

  示例：当图片进入视口时替换占位图。const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; // 替换为真实URL observer.unobserve(img); } });});document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

• 异步组件懒加载

  React动态导入：结合import()和Suspense实现代码分割。const LazyComponent = React.lazy(() => import('./LazyComponent'));function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> );}

  Vue异步组件：通过defineAsyncComponent实现。const AsyncComponent = defineAsyncComponent(() => import('./AsyncComponent.vue'));

通过调整浏览器默认优先级，优化关键资源加载顺序。

• CSS与JS优先级

  CSS设为高优先级：确保首屏样式快速渲染。

  JS区分同步/异步：首屏逻辑同步加载，非关键JS异步或延迟加载。<script src="critical.js" defer></script> <!-- 延迟执行 --><script src="non-critical.js" async></script> <!-- 异步加载 -->

• 显式提升资源优先级使用fetchpriority="high"标记关键图片或资源。

  <img src="hero.jpg" fetchpriority="high" alt="Hero Image">

• 监控与动态调整

  避免预加载过多：在window.addEventListener('load', ...)后触发非关键预取，防止阻塞主线程。

  性能监控：通过Performance API分析资源加载时机，优化策略。

预加载与懒加载需结合场景动态调整：

• 首屏资源预加载：通过preload、dns-prefetch等确保关键资源快速就绪。
• 非首屏内容懒加载：利用loading="lazy"或Intersection Observer延迟加载。
• 优先级动态管理：根据资源重要性调整加载顺序，避免资源竞争。

示例策略：

1. 首屏CSS/JS通过preload提前加载。
2. 第三方CDN使用preconnect优化连接。
3. 图片采用原生懒加载或Intersection Observer。
4. 非首屏组件（如React路由）通过动态import()分割代码。
5. 空闲时通过prefetch预取下一页资源。

通过合理组合这些技术，可显著提升页面响应速度和用户体验。