面试题：Next.js 图片懒加载在复杂布局下的性能优化策略

1. 使用 Next.js 内置的 Image 组件

Next.js 提供了 <Image> 组件，它内置了图片优化和懒加载功能。通过设置 loading="lazy" 属性，图片会在视口接近时加载。例如：

import Image from 'next/image';

function MyComponent() {
  return (
    <Image
      src="/path/to/image.jpg"
      alt="description"
      width={500}
      height={300}
      loading="lazy"
    />
  );
}

2. 处理不同尺寸图片

<Image> 组件支持通过 width 和 height 属性指定图片尺寸。同时，Next.js 会根据设备屏幕大小和像素密度自动提供合适尺寸的图片。可以利用 sizes 属性进一步优化，例如：

<Image
  src="/path/to/image.jpg"
  alt="description"
  width={500}
  height={300}
  loading="lazy"
  sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 33vw"
/>

这使得图片在不同屏幕宽度下按比例加载合适尺寸。

3. 预加载重要图片

对于显示优先级高的图片，可以使用 next/script 进行预加载。例如：

import Script from 'next/script';

function MyComponent() {
  return (
    <>
      <Script
        strategy="beforeInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            const preloadImage = (src) => {
              const img = new Image();
              img.src = src;
            };
            preloadImage('/path/to/high-priority-image.jpg');
          `
        }}
      />
      {/* 其他组件 */}
    </>
  );
}

beforeInteractive 策略会在页面内容可交互之前执行脚本，从而提前预加载图片。

4. 不同设备下的加载策略

移动设备：优先加载尺寸较小、对页面关键内容有帮助的图片。可以利用 devicePixelRatio 媒体查询在 <Image> 组件的 srcSet 中提供不同分辨率的图片。例如：

<Image
  src="/path/to/small-image.jpg"
  srcSet="/path/to/small-image.jpg 1x, /path/to/high-res-small-image.jpg 2x"
  alt="description"
  width={300}
  height={200}
  loading="lazy"
/>

桌面设备：加载更高分辨率、更详细的图片以提供更好的视觉体验。同样可以通过 sizes 和 srcSet 属性根据屏幕尺寸和像素密度提供合适的图片资源。

面试题：Next.js 图片懒加载在复杂布局下的性能优化策略

知识考点

面试题答案

1. 使用 Next.js 内置的 Image 组件

2. 处理不同尺寸图片

3. 预加载重要图片

4. 不同设备下的加载策略