前端性能优化：图片懒加载

随着互联网内容的丰富，网页中图片资源的使用越来越普遍，然而大量的图片加载不仅会消耗大量网络带宽，还可能对页面加载速度产生显著影响，从而降低用户体验。为此，前端性能优化的一个重要策略就是实施图片懒加载（Image Lazy Loading）。

一、什么是图片懒加载？

图片懒加载是一种延迟加载策略，即在用户滚动到图片所在位置时才开始加载图片资源，而不是在页面初始化阶段一次性加载所有图片。这样可以避免因加载未可视区域内的图片而造成的带宽浪费和性能损耗，提升页面首屏加载速度，优化用户体验。

二、图片懒加载的工作原理

1.判断图片是否在可视区域内

通过计算图片元素相对于视口的位置，确定图片是否已经处于可视范围内或者即将进入可视范围。这一步通常采用 Intersection Observer API 或者 scroll 事件配合计算来实现。

2.动态修改图片源地址（src）

当图片满足加载条件时，将图片真实的 src 地址赋值给 img 标签，此时浏览器才会真正发起图片请求。

三、Intersection Observer API

是现代浏览器提供的一个强大的原生 API，它允许开发者异步监听 DOM 元素与父元素或视口（viewport）的交叉状态，即何时一个元素进入或离开视口（或者其他指定的容器元素的可视区域）。这个 API 极大地方便了诸如图片懒加载、无限滚动、视频/广告自动播放、统计曝光次数等多种场景下的性能优化。

工作原理

1. 创建观察者（IntersectionObserver）

const observer = new IntersectionObserver(callback, options);

callback：函数会在目标元素与视口或父元素交叉状态发生变化时被调用，参数是一个 IntersectionObserverEntry 数组，每个条目包含了目标元素的交叉状态详细信息。
options：对象是可选的，可以指定如 rootMargin（类似于 CSS margin，用来扩展观察区域的边缘）和 thresholds（一组数值，表示元素可见比例的阈值，当元素的可见比例达到任意一个阈值时都会触发回调）等属性。

2. 添加观察目标

使用 observer.observe(target)方法将需要监听的 DOM 元素作为目标添加到观察者中。

const targetElement = document.querySelector("#my-element");
observer.observe(targetElement);

3. 处理交叉状态变

当目标元素与观察区域的交叉状态改变时，会触发回调函数。回调函数通常会遍历每个IntersectionObserverEntry对象，检查isIntersecting属性来判断元素是否在视口中，以及intersectionRatio属性来查看元素的可见程度。

4. 移除观察

不再需要监听时，可以通过observer.unobserve(target)方法停止对特定元素的观察。

四、一个 React 图片懒加载组件

import React, { useState, useEffect, useRef } from "react";

interface ImageLazyLoadProps {
  src: string;
  alt?: string;
}

const ImageLazyLoad: React.FC<ImageLazyLoadProps> = ({ src, alt }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const imageRef = useRef < HTMLImageElement > null;

  useEffect(() => {
    //
    const handleIntersection = (entries: IntersectionObserverEntry[]) => {
      entries.forEach((entry) => {
        //当观察到元素进入视口时，调用setIsLoaded(true)更新状态
        if (entry.isIntersecting) {
          setIsLoaded(true);
        }
      });
    };

    // 创建一个Intersection Observer实例
    const observer = new IntersectionObserver(handleIntersection, {
      rootMargin: "200px", //根元素的外边距rootMargin
      threshold: 0.1, //阈值
    });

    if (imageRef.current) {
      observer.observe(imageRef.current);
    }

    // 在组件卸载时，移除观察者
    return () => {
      if (imageRef.current) {
        observer.unobserve(imageRef.current);
      }
    };
  }, []);

  return <div ref={imageRef}>{isLoaded ? <img src={src} alt={alt} /> : <div>Loading...</div>}</div>;
};

export default ImageLazyLoad;

状态管理：使用 React 的 useState Hook 来维护一个布尔型状态变量 isLoaded，默认值为 false，表示图片尚未加载。当图片进入视口时，将其置为 true，触发图片加载。
元素引用：借助 useRef Hook 创建一个对<img>元素的引用（imageRef）。这个引用使得我们可以准确地知道哪个 DOM 元素需要被 Intersection Observer 进行观察。
Intersection Observer API：在 useEffect Hook 中，创建并配置一个 Intersection Observer 实例。当目标元素（即 imageRef.current 指向的图片元素）与视口的交集达到预设的阈值时，触发回调函数 handleIntersection。在此回调函数中，检测到元素进入视口（entry.isIntersecting 为 true）时，更新 isLoaded 状态为 true，启动图片加载。
懒加载逻辑：根据 isLoaded 状态决定渲染内容。当 isLoaded 为 true 时，渲染实际的<img>标签并填充真实图片源地址；否则，渲染一个占位符提示，例如"Loading..."，表明图片正在等待加载。

总结来说，图片懒加载是前端性能优化的重要手段之一，合理运用这一技术能有效提升页面加载速度，减少服务器压力，为用户提供更流畅的浏览体验。同时，随着 Web 技术的发展，我们也应积极关注并利用新的 API 和技术来持续优化这一过程。