面试题：Next.js Image 组件在复杂布局与性能优化间的权衡与实践

Question

假设在一个具有复杂布局（如瀑布流布局）的 Next.js 应用中，使用 Image 组件进行图片展示。在保证性能优化的前提下，如何解决图片加载过程中可能出现的布局抖动问题？请详细说明你的思路以及涉及到的技术点，包括但不限于 CSS 技巧、JavaScript 脚本和 Next.js 特定的配置。

Answer 1

思路

1. 设置固定尺寸：在 HTML 和 CSS 层面为图片预留固定的空间，这样在图片加载过程中，布局不会因为图片尺寸的动态变化而抖动。
2. 使用 CSS 纵横比：确保图片在不同屏幕尺寸下保持一致的比例，避免图片加载后拉伸或挤压周围元素。
3. Next.js 特定配置：利用 Next.js 的 Image 组件的特性，如 layout 和 aspectRatio 属性，进一步优化图片加载和布局稳定性。
4. JavaScript 预加载：在页面加载前，提前预加载图片，确保图片资源准备好，减少加载时的布局变动。

技术点

1. CSS 技巧：
   • 固定尺寸：

     .image-container {
        width: 300px; /* 示例宽度 */
        height: 200px; /* 示例高度 */
        overflow: hidden;
      }
     

   • 纵横比：

     .image-container {
        aspect-ratio: 3 / 2; /* 宽高比 3:2 */
      }
     

2. Next.js 特定配置：
   • layout 属性：设置为 responsive 或 fill 以确保图片在不同屏幕尺寸下正确缩放。例如：

     import Image from 'next/image';
     
     function MyImage() {
       return (
         <Image
           src="/path/to/image.jpg"
           alt="description"
           width={300}
           height={200}
           layout="responsive"
         />
       );
     }
     

   • aspectRatio 属性：指定图片的纵横比，Next.js 会自动根据此比例调整图片布局。例如：

     <Image
       src="/path/to/image.jpg"
       alt="description"
       layout="responsive"
       aspectRatio={3 / 2}
     />
     

3. JavaScript 脚本：
   • 预加载图片：

     function preloadImages(urls) {
       return urls.map(url => {
         const img = new Image();
         img.src = url;
         return img;
       });
     }
     
     const imageUrls = ['/path/to/image1.jpg', '/path/to/image2.jpg'];
     preloadImages(imageUrls);
     

   • 监听图片加载事件：在图片加载完成后，可以执行一些布局调整操作，确保页面布局稳定。

     const img = document.getElementById('my-image');
     img.addEventListener('load', () => {
       // 执行布局相关操作
     });