面试题：Next.js 图片懒加载的性能瓶颈分析与突破方法

性能瓶颈及原因

初始渲染性能：
- 原因：Next.js 图片懒加载在页面初始渲染时，虽然图片未加载，但仍需计算图片占位空间，可能导致布局抖动。且大量图片占位计算会增加初始渲染时间。这是因为浏览器在渲染页面时，需要根据图片的尺寸等信息来确定布局，即便图片处于懒加载状态。
- 实际场景：例如一个商品列表页，包含几十张商品图片，初始渲染时图片占位计算会让页面加载明显卡顿。
网络请求管理：
- 原因：大量图片同时进入视口触发懒加载，可能导致短时间内网络请求过于集中，超出网络带宽承受能力。这是由于浏览器并发请求数量限制，当请求过多时，部分请求会排队等待，从而延长图片加载时间。
- 实际场景：在一个图片瀑布流应用中，用户快速滚动页面，大量图片进入视口，引发网络拥堵。
内存占用：
- 原因：图片加载后会占用内存，如果图片数量多且分辨率高，内存消耗迅速增大。特别是在移动端设备，内存有限，容易导致应用卡顿甚至崩溃。这是因为图片解码后以位图形式存储在内存中，图片数据量越大，占用内存越多。
- 实际场景：一款展示高清图片的艺术作品应用，用户浏览多幅作品图片后，设备出现卡顿。

突破方法和优化思路

优化初始渲染：
- 方法：设置图片的固定尺寸，通过 width 和 height 属性明确图片大小，避免布局抖动。同时，可以使用 next/image 的 placeholder="blur" 功能，在图片加载前显示模糊占位图，提升用户体验。这利用了浏览器根据固定尺寸提前布局的原理，减少渲染重排。
- 示例：

import Image from 'next/image';

<Image
  src="/path/to/image.jpg"
  alt="description"
  width={300}
  height={200}
  placeholder="blur"
  blurDataURL="data:image/...base64encodedblurimage"
/>

网络请求优化：
- 方法：采用请求队列和延迟加载策略。可以自定义一个图片加载队列，控制同时请求的图片数量，避免网络过载。利用 IntersectionObserver 的 threshold 属性设置延迟加载，例如设置为 0.5，即图片距离视口一半高度时开始加载，减少短时间内的请求数量。
- 示例：

// 自定义图片加载队列逻辑
let requestQueue = [];
function loadImage(url) {
  if (requestQueue.length >= 5) {
    // 假设最多同时处理5个请求
    return new Promise((resolve) => {
      requestQueue.push({ url, resolve });
    });
  }
  return new Promise((resolve) => {
    const img = new Image();
    img.onload = resolve;
    img.src = url;
  });
}

// 使用IntersectionObserver延迟加载
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting && entry.intersectionRatio >= 0.5) {
      loadImage(entry.target.src).then(() => {
        observer.unobserve(entry.target);
      });
    }
  });
});

内存优化：
- 方法：对图片进行适当压缩，降低图片分辨率和文件大小。在 Next.js 中，可以使用 next/image 的 quality 属性设置图片质量，例如设置为 80，在保证视觉效果的同时减少内存占用。对于不再显示的图片，及时释放内存，可通过 IntersectionObserver 监听图片离开视口，卸载图片资源。
- 示例：

import Image from 'next/image';

<Image
  src="/path/to/image.jpg"
  alt="description"
  width={300}
  height={200}
  quality={80}
/>

// 释放离开视口图片的内存
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (!entry.isIntersecting) {
      entry.target.src = '';
      observer.unobserve(entry.target);
    }
  });
});

面试题：Next.js 图片懒加载的性能瓶颈分析与突破方法

知识考点

面试题答案

性能瓶颈及原因

突破方法和优化思路