你知道src和srcset的加载顺序吗？

你知道src和srcset的加载顺序吗？

根据 HTML 规范与浏览器加载机制，<img> 标签的 src 属性和 srcset 属性的加载顺序遵循以下逻辑：

---

1. 默认行为：src 图片优先加载

• src 作为兜底资源 ：浏览器在解析 HTML 时，会优先加载 src 属性指定的图片 ，作为默认显示的图像。即使 srcset 存在，浏览器也会先下载 src 的图片以确保兼容性（尤其在不支持 srcset 的旧浏览器中）。
• srcset 的延迟加载 ：浏览器在完成 src 图片加载后，会根据设备的视口宽度、像素密度（DPR）和 sizes 属性的规则，从 srcset 候选集中选择更合适的图片异步加载。这一过程通常在浏览器空闲时或视口变化时触发。

---

2. 高分辨率图片的替换逻辑

• 智能升级机制 ：如果 srcset 中存在更高分辨率或更适配当前设备的图片，浏览器会在后台加载这些候选图，并在加载完成后替换默认的 src 图片 。例如，在高 DPR 的 Retina 屏幕上，浏览器可能加载 2x 或 3x 的高清图替换 1x 的低清图。
• 视觉过渡效果 ：若使用渐进式图片格式（如 Progressive JPEG），用户会先看到模糊的低清图，随着高清图加载完成逐渐清晰。

---

3. 加载顺序的优化策略

以下方法可控制加载顺序，实现"先低后高"的体验优化：

1. 首屏关键图片优先加载

   • 对首屏图片直接使用 src 指定低分辨率图，srcset 提供高清候选，并添加 sizes 属性辅助浏览器决策。

   • 示例 ：

     <img src="low-res.jpg"
          srcset="high-res.jpg 1024w"
          sizes="(max-width: 600px) 100vw, 50vw"
          alt="示例图片">

2. 非首屏图片延迟加载

   • 对非关键图片添加 loading="lazy" 属性，浏览器会在用户滚动到附近时再加载高清图：

     <img src="low-res.jpg"
          srcset="high-res.jpg 1024w"
          loading="lazy"
          alt="示例图片">

   • 此方法减少初始请求压力，同时保证低分辨率图快速展示。

3. 动态加载控制（JavaScript）

   • 使用 Intersection Observer API 监听图片是否进入视口，动态触发高清图加载：

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

   • 此方案可手动控制高清图的加载时机。

---

4. 、注意事项

• 兼容性 ：旧浏览器（如 IE11）不支持 srcset，需始终保留 src 作为兜底。
• 性能优化 ：
  • 低清图应压缩至最小体积（如 20-50KB），高清图优先使用 WebP/AVIF 格式。
  • 使用 CDN 动态适配图片尺寸（如 Cloudinary），避免手动处理多版本图片。

---

总结

浏览器默认会先加载 src 图片 ，随后根据设备特性从 srcset 中选择并加载更合适的图片进行替换。通过合理利用 sizes、懒加载和渐进式格式，可优化加载顺序，实现低清图快速展示、高清图后续加载的流畅体验。