懒加载实现

图片懒加载

1	<img data-src="image.jpg" alt="Lazy Image">

const images = document.querySelectorAll('img[data-src]');

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

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

组件懒加载

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

总结

懒加载提升首屏性能。Intersection Observer 简单有效。

交互型懒加载

滚动加载（infinite scroll）
按需加载组件
使用 React.lazy 和 Suspense 实现 React 组件懒加载

const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

兼容性与 Polyfill

IntersectionObserver 在旧浏览器中需引入 polyfill：

1	<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

图片懒加载的注意点

保留 width/height 属性以避免 CLS
SEO 影响：使用 noscript 提供备选内容
使用 loading="lazy" 原生属性（支持现代浏览器）

代码示例：CSS 懒加载

.lazy {
  opacity: 0;
  transition: opacity 0.3s;
}
.lazy.loaded {
  opacity: 1;
}

性能分析

减少首屏流量
降低内存占用
提高滚动流畅度- 提高滚动流畅度- 提高滚动流畅度- 提高rsection-observer

实践建议

只对可见区域外的资源使用懒加�1. 只对可见区域外的资源使用懒加�1. 只对加载。
333333�333333�333333�333333�333333�333333�333333�333333�333333�3�单有效的优化手段，但使用不当会导致用户感知性能下降。需根据�333333�333333唨户行为进行权衡。

更深内容

延续上文，详细讨论懒加载中常见的问题和高级应用。

SEO 与用户体验

使用 noscript 标签为搜索引擎提供备选内容：

1	<noscript><img src="image.jpg" alt="fallback"></noscript>

性能指标

记录懒加载元素加载时间，分析其对 LCP 的影响。

自动化工具

webpack 的 import() 自动分割
使用 Babel 插件

安全性

确认懒加载内容不会触发脚本注入

结语

懒加载是一种可扩展的策略，可与预加载、缓存一起使用构建渐进式体验。

懒加载补充行 1
懒加载补充行 2
懒加载补充行 3
懒加载补充行 4
懒加载补充行 5
懒加载补充行 6
懒加载补充行 7
懒加载补充行 8
懒加载补充行 9
懒加载补充行 10
懒加载补充行 11
懒加载补充行 12
懒加载补充行 13
懒加载补充行 14
懒加载补充行 15
懒加载补充行 16
懒加载补充行 17
懒加载补充行 18
懒加载补充行 19
懒加载补充行 20
懒加载补充行 21
懒加载补充行 22
懒加载补充行 23
懒加载补充行 24
懒加载补充行 25