首屏加载优化 | TryCoding.Fun

首屏加载优化

懒加载、预加载、SSR、代码拆分、资源压缩、CDN 等优化方案

问题

如何优化首屏加载速度？常见方案有哪些？

解答

1. 懒加载（Lazy Loading）

延迟加载非首屏资源，减少初始请求。

// 图片懒加载 - 使用 Intersection Observer
const lazyImages = document.querySelectorAll('img[data-src]');

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

lazyImages.forEach((img) => imageObserver.observe(img));

<!-- HTML 原生懒加载 -->
<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" />

// React 组