HTML图像标签实际上会阻塞浏览器中的JS主线程吗？

Question

互联网上有很多文章建议使用 Web Worker 加载图像以提高性能并释放主线程。（谷歌搜索）

但我找不到任何实际的参考资料说图像标签实际上阻塞了主线程。

我认为浏览器足够智能，可以识别图像标签并理解它无论如何都必须渲染它。这是一种常见的情况。因此，浏览器不需要我们为这个常见问题添加新的 Web Worker，而是可以使用单独的进程/线程/事物以不会阻塞主线程的方式来解决这个问题。

本文描述了

有趣的事实：<img>标签实际上会阻止您的应用程序加载。如果页面上有 100 个图像，浏览器将在呈现页面之前下载所有 100 个图像。

我无法理解这一点。我认为添加loading="lazy"比网络工作者的工作更好。

Answer 1

有趣的事实：<img>标签实际上会阻止您的应用程序加载。如果页面上有 100 个图像，浏览器将在呈现页面之前下载所有 100 个图像。

那是完全错误的。如果这是真的，那么没有人会看到他们的网页文本中包含图像所在的空框，然后将图像加载到这些框中。DOMContentLoadedvs. events的全部要点load在于，在外部页面资源完成下载和渲染之前，可以完全解析 HTML 元素。此外，没有人需要某个load事件img，因为如果该文章属实，那么当您看到该页面时，所有图像都将被加载。

=================================================== ===========

虽然 JavaScript 运行时是单线程的，但浏览器客户端却不是。“资源文件”（正在解析的 .html 页面引用的任何文件）与正在解析的页面同时下载。客户端同时下载的资源可能有最大数量（多年前，IE 的默认限制为 10，但我认为此后该限制已经提高）。

通常，当您加载网页时，您会首先看到页面的所有文本（因为文本加载速度非常快），然后加载图像。这只是因为图像的下载时间比文本长，而不是图像需要等待开始下载。

这可以通过在页面加载时查看浏览器开发工具的“网络”选项卡来验证。您将看到各种资源与该页面同时下载。