面试题：CSS响应式图片srcset和sizes属性的深度剖析与创新应用

基于srcset和sizes属性的优化方案

图片资源选择
- 根据不同设备分辨率和屏幕宽度，准备多种尺寸的图片。例如，对于常见的手机设备，准备宽度为320px、640px的图片；对于平板设备，准备宽度为768px、1024px的图片；对于桌面设备，准备宽度为1280px、1920px等尺寸的图片。
- 图片格式选择上，优先考虑WebP格式，因为其在保证图片质量的前提下，文件大小相对较小，可显著提升加载速度。但由于部分浏览器不支持WebP，还需准备JPEG和PNG格式作为备用。

srcset属性值计算

srcset属性用于指定一系列图片资源及其对应的像素密度描述符。例如：

<img src="small.jpg"
     srcset="small.jpg 1x, medium.jpg 2x, large.jpg 3x"
     alt="Product Image">

对于电商网站，可根据商品图片的使用场景和常见设备像素比（device - pixel - ratio, DPR）来动态计算srcset的值。通过JavaScript获取设备的DPR，结合预先准备的图片资源，生成合适的srcset属性值。例如：

const dpr = window.devicePixelRatio;
let srcset = '';
if (dpr === 1) {
    srcset = '320w.jpg 1x';
} else if (dpr === 2) {
    srcset = '320w.jpg 1x, 640w.jpg 2x';
} else if (dpr === 3) {
    srcset = '320w.jpg 1x, 640w.jpg 2x, 960w.jpg 3x';
}
const img = document.createElement('img');
img.srcset = srcset;
img.src = '320w.jpg';
img.alt = 'Product Image';
document.body.appendChild(img);

sizes属性值计算

sizes属性用于指定不同视口宽度下图片的显示宽度。例如，在电商网站的商品详情页，当视口宽度小于768px时，图片宽度占满屏幕宽度（100vw）；当视口宽度大于等于768px时，图片宽度固定为600px。则sizes属性可设置为：

<img src="product.jpg"
     srcset="product - 320.jpg 320w, product - 640.jpg 640w, product - 1280.jpg 1280w"
     sizes="(max - width: 768px) 100vw, 600px"
     alt="Product Image">

同样，也可以通过JavaScript动态计算sizes属性值。例如，监听窗口大小变化事件，根据当前视口宽度设置合适的sizes值：

window.addEventListener('resize', function () {
    const viewportWidth = window.innerWidth;
    let sizes = '';
    if (viewportWidth <= 768) {
        sizes = '100vw';
    } else {
        sizes = '600px';
    }
    const img = document.querySelector('img.product - img');
    img.sizes = sizes;
});

结合其他前端性能优化技术
- 懒加载：对于电商网站中不在当前视口内的商品图片，使用懒加载技术。可以通过IntersectionObserver API实现图片的懒加载。当图片进入视口一定比例（如50%）时，开始加载图片。例如：
```
const images = document.querySelectorAll('img[data - lazy]');
const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.lazy;
            observer.unobserve(img);
        }
    });
});
images.forEach(image => {
    observer.observe(image);
});
```
- 图片压缩：在准备图片资源时，使用图像压缩工具对图片进行进一步压缩，去除不必要的元数据等，在不影响图片质量的前提下减小文件大小。
- CDN加速：将图片资源部署到CDN（内容分发网络）上，CDN会根据用户的地理位置，选择距离最近的服务器节点提供图片资源，从而加快图片的加载速度。

不同浏览器和网络环境下的优势与潜在风险

优势
- 不同浏览器：srcset和sizes属性得到了现代浏览器的广泛支持，包括Chrome、Firefox、Safari等主流浏览器。即使在一些较老版本的浏览器中，虽然可能对某些高级特性支持不完全，但仍能加载默认的src图片，保证图片的基本显示。
- 不同网络环境：通过选择合适尺寸的图片和格式，能有效减少图片下载量。在低带宽网络环境下，较小尺寸的图片可以更快地加载，提升用户体验；在高带宽网络环境下，高质量的大尺寸图片可以提供更好的视觉效果，同时结合CDN加速，能充分利用网络带宽，快速加载图片。
潜在风险
- 浏览器兼容性：尽管主流浏览器对srcset和sizes属性支持较好，但仍有极个别老旧浏览器可能不支持这些属性，或者在属性解析上存在一些细微差异。此时，需要通过提供合理的默认src图片来兜底，确保图片在所有浏览器中都能显示。
- 网络不稳定：在网络不稳定的环境下，如移动网络信号波动较大时，图片加载可能会失败。可以通过设置图片的重试机制，当图片加载失败时，自动重试加载图片一定次数，以提高图片加载成功的概率。
- 图片尺寸计算不准确：如果在动态计算srcset和sizes属性值时出现错误，可能导致加载的图片尺寸不合适，影响用户体验。因此，在开发过程中需要进行充分的测试，确保在各种设备和视口宽度下，图片尺寸计算准确无误。

星途面试题库

面试题：CSS响应式图片srcset和sizes属性的深度剖析与创新应用

知识考点

面试题答案

基于srcset和sizes属性的优化方案

不同浏览器和网络环境下的优势与潜在风险