面试题：CSS响应式图片srcset与sizes属性在高性能前端架构中的专家级考量

1. 使用srcset和sizes属性

srcset：用于提供多个不同分辨率的图片资源路径，浏览器会根据设备像素比（devicePixelRatio）和视口宽度等因素，自动选择最合适的图片进行加载。例如：

<img src="small.jpg"
     srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
     alt="商品图片">

上述代码中，浏览器会根据设备像素比选择相应的图片，1x 设备加载 small.jpg，2x 设备加载 medium.jpg，3x 设备加载 large.jpg。

sizes：配合srcset使用，它告诉浏览器不同视口宽度下图片的布局宽度，以便更精准地选择合适的图片。比如在响应式布局中：

<img src="default.jpg"
     srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w"
     sizes="(max-width: 480px) 100vw, (max-width: 800px) 50vw, 33vw"
     alt="商品图片">

这里 sizes 属性定义了不同视口宽度下图片的布局宽度，480w、800w、1200w 表示对应图片的固有宽度，浏览器根据这些信息选择最合适的图片。

2. 结合其他前端技术

HTTP/2：
- 多路复用：HTTP/2 支持在一个 TCP 连接上同时传输多个请求和响应，避免了 HTTP/1.1 中的队头阻塞问题，图片资源可以并行加载，提高加载速度。
- 头部压缩：减少了请求和响应头部的大小，降低了传输的数据量，加快图片等资源的加载。
- 服务器推送：服务器可以主动将图片等相关资源推送给客户端，提前缓存，当页面需要时可以直接使用，减少等待时间。
图片懒加载：
- 原理：只在图片进入浏览器可视区域时才进行加载，避免页面初始渲染时加载大量图片，从而提高页面的加载速度。
- 实现方式：可以使用原生的 IntersectionObserver API 实现，例如：

const images = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            observer.unobserve(img);
        }
    });
});
images.forEach(image => {
    observer.observe(image);
});

在 HTML 中，图片标签这样写：

<img data-src="image.jpg" alt="商品图片">

图像格式选择：
- WebP：具有更好的压缩比，在保证图片质量的前提下，文件大小比 JPEG、PNG 等格式更小，可以有效减少图片传输的数据量，加快加载速度。但要注意兼容性，对于不支持 WebP 的浏览器，可以提供 JPEG 或 PNG 格式作为 fallback。例如：

<picture>
    <source type="image/webp" srcset="image.webp">
    <source type="image/jpeg" srcset="image.jpg">
    <img src="image.jpg" alt="商品图片">
</picture>

- **AVIF**：比 WebP 有更好的压缩性能，同样要考虑兼容性，采用类似上述 `<picture>` 标签的方式提供 fallback。

3. 可能遇到的问题及解决方案

兼容性问题：
- srcset和sizes：部分老旧浏览器不支持这两个属性，可以使用 polyfill 来解决，比如 picturefill 库，它可以模拟现代浏览器的图片加载行为。
- HTTP/2：一些老旧服务器可能不支持 HTTP/2，需要升级服务器软件或使用 CDN，CDN 一般都支持 HTTP/2，可以代理请求并以 HTTP/2 协议与服务器通信。
- 图片格式：如前面提到的 WebP 和 AVIF 格式，对于不支持的浏览器，通过 <picture> 标签提供 fallback 图片格式。
SEO优化问题：
- 图片描述：即使使用了各种加载优化技术，图片的 alt 属性依然要准确描述图片内容，以便搜索引擎理解图片含义，提高 SEO 效果。
- 图片文件名：文件名应具有描述性，使用相关关键词，有助于搜索引擎识别图片主题。
性能监控和优化调整：
- 工具：使用 Lighthouse、GTmetrix 等工具对页面性能进行监测，这些工具可以分析图片加载情况，给出优化建议。
- 调整策略：根据监测结果，调整图片的分辨率、格式，优化懒加载的时机等，持续提升图片加载性能。

星途面试题库

面试题：CSS响应式图片srcset与sizes属性在高性能前端架构中的专家级考量

知识考点

面试题答案

1. 使用srcset和sizes属性

2. 结合其他前端技术

3. 可能遇到的问题及解决方案