3 分钟掌握图片懒加载核心技术：面试攻略

图片懒加载：3分钟掌握性能优化核心技术

一、为什么懒加载是前端必备技能？

1.1 核心价值

性能提升：平均减少首屏加载时间40%-60%
带宽节省：电商网站可节省30%以上的图片流量
体验优化：用户滚动时无缝加载，避免白屏等待

1.2 面试考察点

二、IntersectionObserver方案（现代浏览器首选）

2.1 完整实现代码

ini 复制代码

class LazyLoader {
  constructor(options = {}) {
    this.options = {
      rootMargin: '200px 0px',
      threshold: 0.01,
      ...options
    };
    this.observer = null;
    this.init();
  }

  init() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          this.loadImage(entry.target);
          this.observer.unobserve(entry.target);
        }
      });
    }, this.options);

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

  loadImage(img) {
    const src = img.dataset.lazyload;
    img.src = src;
    img.onload = () => img.removeAttribute('data-lazyload');
    img.onerror = () => console.error(`Failed to load ${src}`);
  }
}

// 使用示例
new LazyLoader({
  rootMargin: '300px 0px' // 提前300px加载
});

2.2 关键配置解析

csharp 复制代码

{
  root: null,           // 默认视口作为观察区域
  rootMargin: '200px',  // 观察区域向外扩展200px
  threshold: 0.1        // 元素10%可见时触发
}

2.3 性能对比数据

三、传统滚动方案（兼容旧浏览器）

3.1 优化版实现

kotlin 复制代码

function throttle(fn, delay) {
  let lastCall = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      fn.apply(this, args);
      lastCall = now;
    }
  };
}

class LegacyLazyLoader {
  constructor() {
    this.images = [];
    this.init();
  }

  init() {
    this.images = Array.from(document.querySelectorAll('[data-lazyload]'));
    this.checkVisible();
    
    window.addEventListener('scroll', throttle(this.checkVisible.bind(this), 200));
    window.addEventListener('resize', throttle(this.checkVisible.bind(this), 200));
  }

  checkVisible() {
    this.images = this.images.filter(img => {
      const rect = img.getBoundingClientRect();
      const isVisible = (
        rect.top <= window.innerHeight * 1.5 && 
        rect.bottom >= 0
      );
      
      if (isVisible) {
        this.loadImage(img);
        return false;
      }
      return true;
    });
  }

  loadImage(img) {
    img.src = img.dataset.lazyload;
  }
}

3.2 性能优化技巧

节流处理：滚动事件200ms执行一次
批量检测 ：使用getBoundingClientRect前先过滤元素
内存管理：已加载图片移出检测队列

四、工程化最佳实践

4.1 完整HTML示例

ini 复制代码

<img 
  data-lazyload="real-image.jpg"
  src="placeholder.svg" 
  width="300"
  height="200"
  alt="产品图片"
  class="lazy-image"
  style="background: #f5f5f5"
>

4.2 关键CSS优化

css 复制代码

.lazy-image {
  transition: opacity 0.3s;
  opacity: 0;
}

.lazy-image.loaded {
  opacity: 1;
}

4.3 现代浏览器增强

xml 复制代码

<!-- 原生懒加载（渐进增强） -->
<img src="image.jpg" loading="lazy" alt="...">

五、常见问题解决方案

5.1 SEO优化方案

xml 复制代码

<noscript>
  <img src="real-image.jpg" alt="备用图片">
</noscript>

5.2 错误处理增强

ini 复制代码

img.onerror = function() {
  this.src = 'fallback.jpg';
  this.classList.add('error');
};

5.3 响应式图片处理

ini 复制代码

<picture>
  <source data-srcset="large.jpg" media="(min-width: 1200px)">
  <source data-srcset="medium.jpg" media="(min-width: 768px)">
  <img data-src="small.jpg" class="lazy">
</picture>

六、性能监控指标

6.1 关键指标采集

ini 复制代码

const perf = {
  start: performance.now(),
  loadedCount: 0
};

function onImageLoad() {
  perf.loadedCount++;
  const now = performance.now();
  if (perf.loadedCount === 1) {
    console.log('首图加载耗时:', now - perf.start);
  }
}

6.2 Lighthouse优化建议

优先加载首屏关键图片
使用合适的图片格式（WebP/AVIF）
配合CDN加速图片分发

七、框架集成方案

7.1 React实现

ini 复制代码

function LazyImage({ src, alt }) {
  const [isLoaded, setIsLoaded] = useState(false);
  const imgRef = useRef();

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        imgRef.current.src = src;
        observer.disconnect();
      }
    });

    observer.observe(imgRef.current);
    return () => observer.disconnect();
  }, [src]);

  return (
    <img
      ref={imgRef}
      alt={alt}
      style={{ opacity: isLoaded ? 1 : 0 }}
      onLoad={() => setIsLoaded(true)}
    />
  );
}

八、升级学习路径

基础掌握：IntersectionObserver API
进阶优化：动态加载策略（视口距离/网络速度）
高阶应用：结合Service Worker实现离线缓存
未来趋势 ：loading="lazy"原生支持演进

掌握懒加载不仅是面试加分项，更是提升实际项目性能的利器。建议在项目中实践后，使用Chrome DevTools的Performance面板进行效果验证。在前端性能优化的版图中，图片懒加载是提升用户体验的关键一环。本文将系统拆解懒加载的核心原理、主流实现与面试要点，帮助你在 3 分钟内建立完整知识体系。