浏览器的页面解析和渲染机制在处理 `<img>` 的 `src` 时，与处理 `<script>` 的 `src` 有本质区别

浏览器的页面解析和渲染机制在处理 <img> 的 src 时，与处理 <script> 的 src 有本质区别

---

1. 浏览器的工作流程
浏览器解析和渲染页面的过程分为多个阶段：

1. 解析 HTML：构建 DOM 树。
2. 解析 CSS：构建 CSSOM 树。
3. 合并 DOM 和 CSSOM：生成渲染树（Render Tree）。
4. 布局（Layout）：计算元素的位置和尺寸。
5. 绘制（Painting）：将内容绘制到屏幕上。

<img> 的 src 加载行为主要在 解析 HTML 和 渲染 阶段发挥作用。

---

2. 为什么 <img> 的 src 不阻塞页面解析？
异步加载机制
• 非关键资源：图片是静态内容，不会改变 DOM 或 CSSOM 的结构。即使图片未加载完成，浏览器也能继续解析后续 HTML 内容。

• 并行下载：浏览器会立即发起图片的 HTTP 请求，但 HTML 解析会继续执行，无需等待图片下载完成。

对比 <script> 的阻塞行为
• <script> 的 src 会阻塞解析：因为 JavaScript 可能修改 DOM 或 CSSOM，浏览器必须等待脚本下载并执行完毕，以确保后续解析的正确性。

• <img> 的 src 无阻塞：图片不会修改文档结构，浏览器只需记录图片的位置和占位信息，无需暂停解析。

---

3. 为什么会影响渲染位置？
布局阶段的不确定性
• 未指定图片尺寸：如果未通过 HTML 的 width/height 或 CSS 明确设置图片尺寸，浏览器在布局时无法预知图片的最终大小，只能先预留一个默认占位空间（通常是 0×0 像素）。

• 图片加载完成后触发重排（Reflow）：当图片下载完成时，浏览器发现实际尺寸与占位空间不符，会重新计算布局并触发重排，导致页面内容“跳动”。

优化建议
• 显式设置图片尺寸：通过 width 和 height 属性指定图片大小，帮助浏览器提前预留正确空间，避免布局抖动。

<img src="photo.jpg" width="300" height="200">

---

4. 浏览器如何优化图片加载？
• 异步解码：现代浏览器会在后台线程解码图片，避免占用主线程。

• 懒加载（Lazy Loading）：通过 loading="lazy" 属性延迟加载视口外的图片，减少初始请求数量。

<img src="photo.jpg" loading="lazy">

---

总结
• 不阻塞解析：因为图片是静态资源，不会影响文档结构，浏览器可以异步加载。

• 可能影响渲染：未明确尺寸时，图片加载完成后会触发重排，导致布局变化。

• 优化方向：显式设置图片尺寸、使用懒加载，以提升性能和用户体验。

通过这种机制，浏览器在保证页面快速解析的同时，又能动态处理图片的加载和渲染。