<img> 会阻塞 HTML 页面渲染吗？

结论

在正常情况下，普通的 <img src="..."> 不会阻塞 HTML 解析，也通常不会阻塞页面的首次渲染。

浏览器解析到 <img> 时，会发起图片请求，同时继续解析后面的 HTML。图片尚未下载或解码完成时，页面中的文字、布局和其他已经准备好的内容通常仍然可以先被绘制；图片完成加载和解码后，浏览器再绘制图片本身。

不过，“不会阻塞渲染”不等于“图片不会影响性能”。图片仍然可能带来以下影响：

• 图片本身出现较晚；
• 图片是首屏最大内容时，延迟 Largest Contentful Paint（LCP）；
• 大图片占用网络带宽，影响 CSS、JavaScript 等关键资源的加载；
• 图片解码和绘制消耗 CPU 或内存，可能造成页面卡顿；
• 未提前确定图片尺寸时，图片加载后可能造成布局偏移（CLS）；
• 非懒加载图片通常会影响 window 的 load 事件完成时间。

因此，更准确的问题应该区分为：图片是否阻塞 HTML 解析、是否阻塞首次渲染，以及是否延迟图片内容或影响页面性能。

“阻塞”需要区分三种情况

1. 阻塞 HTML 解析

指浏览器暂时停止构建 DOM，不能继续解析后面的 HTML。

普通 <img> 不属于这类资源。浏览器发现图片后可以下载图片，同时继续解析文档。

2. 阻塞首次渲染

指浏览器在资源准备好之前，暂时不绘制页面，以避免用户看到不完整或没有样式的内容。

普通的、适用于当前媒体的 CSS 样式表通常会阻塞首次渲染，因为浏览器需要先获得相关样式，才能正确计算页面外观。普通 <img> 通常不会阻塞整个页面的首次渲染。

3. 延迟某个内容显示

图片没有加载完成时，图片内容自然无法显示，或者只能显示占位区域、替代文本或破损图标。这只是图片自身的显示被延迟，并不表示页面其他内容也必须等待。

如果图片刚好是首屏最醒目的主图，用户可能会感觉页面没有加载完成。这通常体现为 LCP 变慢，而不是普通 <img> 成为了页面级的渲染阻塞资源。

浏览器处理图片的大致过程

浏览器的实际实现比下面的模型复杂，而且会增量执行，不是等每一步全部完成后才进入下一步：

1. 浏览器接收 HTML 响应。HTML 通常是边下载、边解析的，不需要等整个文件下载完才开始解析。
2. 解析器或预加载扫描器发现 <img>，浏览器根据 src、srcset、sizes 等信息选择图片资源并发起请求。
3. HTML 解析器继续处理后面的内容，DOM、样式和布局信息也会逐步构建。
4. 浏览器可以先绘制已经具备条件的内容。图片下载完成后，还需要经过解码，随后浏览器重新绘制图片所在区域。
5. ==页面会随着资源加载、脚本执行和用户交互持续进行样式计算、布局、绘制和图层合成。==

“DOM 解析完成后生成 Render Tree，再一次性绘制整个页面”是便于理解的简化模型。现代浏览器通常会增量构建和更新页面，并不会等整个文档和所有图片都完成后才开始显示内容。

下面的流程图仅用于帮助理解浏览器从解析 HTML 到布局、绘制的大致过程；实际浏览器会使用预加载扫描器、增量布局和并行任务，具体实现会因浏览器而异。

为什么应该设置 width 和 height

未设置图片尺寸通常不会阻塞渲染，但可能造成布局偏移：浏览器在图片尚未获取到尺寸时无法准确预留空间，图片加载后页面内容可能被向下推移。

建议提供图片的原始宽高：

<img
  src="/images/article-cover.webp"
  width="1200"
  height="800"
  alt="文章封面"
>

在响应式布局中，可以结合 CSS 使用：

.article-image {
  display: block;
  width: 100%;
  height: auto;
}

width 和 height 不要求图片始终以这个像素尺寸显示==。浏览器主要利用它们推导图片的宽高比，从而在图片加载前预留合适的空间。提供的宽高比应尽量与原图一致，否则仍可能出现布局问题或图片变形。==

如果图片容器的比例固定，也可以使用 aspect-ratio：

.article-image-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.article-image-wrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

loading="lazy" 应该怎样使用

loading="lazy" 是一个加载提示，适合推迟视口外、非关键图片的请求：

<img
  src="/images/gallery-01.webp"
  width="800"
  height="533"
  loading="lazy"
  decoding="async"
  alt="风景图"
>

使用时需要注意：

• 懒加载主要用于页面下方暂时不可见的图片；
• 不要对首屏主图或可能成为 LCP 的图片使用 loading="lazy"；
• 即使使用懒加载，也应该设置 width、height 或 aspect-ratio；
• 浏览器会根据距离视口的远近和网络情况决定具体加载时机，lazy 不是精确的时间控制；
• loading="lazy" 主要减少初始阶段的网络竞争，并不是把一个本来会阻塞渲染的 <img> “变成异步资源”。普通 <img> 默认就通常不会阻塞页面级渲染。

对于首屏重要图片，可以让浏览器提高其请求优先级，但应谨慎使用：

<img
  src="/images/hero.webp"
  width="1440"
  height="810"
  fetchpriority="high"
  alt="产品主视觉"
>

fetchpriority="high" 只是优先级提示，不保证浏览器一定按照指定优先级加载，也不应给页面中的所有图片都设置为 high。

如果图片是通过 CSS 或 JavaScript 较晚发现的，并且确实是关键图片，可以考虑预加载：

<link rel="preload" as="image" href="/images/hero.webp">

图片已经能在 HTML 中被及时发现时，通常不需要额外预加载，否则可能造成重复请求或挤占其他关键资源的带宽。

decoding 与图片显示

decoding="async" 是图片解码方式的提示：

<img
  src="/images/photo.webp"
  width="1200"
  height="800"
  decoding="async"
  alt="示例图片"
>

它主要影响浏览器如何安排图片解码，不负责控制图片下载优先级，也不能代替图片尺寸设置。浏览器可以忽略该提示，实际效果取决于浏览器和图片本身。大多数场景下，优先保证图片尺寸、文件大小和加载策略，比盲目设置 decoding 更重要。

图片未缓存会不会阻塞页面？

图片未缓存时，需要通过网络重新下载，可能带来以下问题：

• 图片内容显示更晚；
• 首屏主图的 LCP 变慢；
• 大量图片与 CSS、JavaScript 竞争网络带宽；
• 图片解码、缩放和绘制耗费更多资源。

但这并不意味着浏览器会因为图片未缓存而停止解析整个 HTML 或等待图片完成后才绘制其他内容。可以通过合理的图片尺寸、现代图片格式、压缩、响应式图片、缓存和 CDN 来降低影响。

CSS 背景图片是否会阻塞渲染

需要区分 CSS 文件和 CSS 文件中的背景图片：

• 普通的、适用于当前页面的 CSS 样式表可能阻塞首次渲染；
• background-image 图片本身通常不会阻塞整个页面渲染；
• 背景图片尚未加载完成时，元素可以先按照其他样式显示，背景在加载完成后再出现；
• background-attachment: fixed 只是控制背景的定位方式，不是异步加载或性能优化手段。

如果背景图是页面首屏不可缺少的内容，应从图片大小、格式、缓存和请求优先级等方面优化，而不是依赖 background-attachment: fixed。

与其他资源的对比

因此，不能简单地说“使用 src 的外部资源不会阻塞”或“使用 href 的外部资源一定会阻塞”。真正决定行为的是元素类型、属性、资源用途、媒体条件以及浏览器的加载策略。

推荐写法

首屏主图

首屏主图应该尽早发现，并提供尺寸；不要为了“避免阻塞”而懒加载：

<img
  src="/images/hero-960.webp"
  srcset="
    /images/hero-480.webp 480w,
    /images/hero-960.webp 960w,
    /images/hero-1440.webp 1440w
  "
  sizes="100vw"
  width="1440"
  height="810"
  fetchpriority="high"
  alt="页面主视觉"
>

页面下方的非关键图片

页面下方的图片可以延迟加载，并保留尺寸：

<img
  src="/images/gallery-960.webp"
  width="960"
  height="640"
  loading="lazy"
  decoding="async"
  alt="文章配图"
>

总结

1. 普通 <img> 通常不会阻塞 HTML 解析，也通常不会阻塞页面首次渲染。
2. 图片加载慢会延迟图片本身的显示，并可能影响 LCP、load 事件和网络性能，但不等于阻塞整个页面。
3. 设置 width、height 或 aspect-ratio 的主要目的是预留空间、避免布局偏移，而不是解除渲染阻塞。
4. loading="lazy" 适合视口外的非关键图片，不适合首屏主图。
5. CSS 样式表和没有 async、defer 的经典 JavaScript 更可能成为真正的解析或渲染阻塞资源。
6. src 和 href 本身不决定资源是否阻塞，应该结合标签类型和加载属性判断。

参考资料

• MDN：浏览器的工作原理
• MDN：<img>：图片嵌入元素
• MDN：Lazy loading
• web.dev：分析关键渲染路径
• web.dev：优化图片加载