Javascript 对 DOM 图像文件的 .src 分配是异步的吗？

Question

const myImage = document.querySelector("#my-image");
myImage.src = "selfie.jpg";

有人告诉我上面的代码是异步的。是异步的吗？

我以为我只是在 myImage 对象上设置 src 属性。我没有使用回调或承诺。这是一个简单的2行代码。所以我认为它是同步的。我错过了什么吗？

Answer 1

这完全取决于您所说的“.src 的分配”是什么意思。

HTMLImageElement.src IDL 属性在这方面实际上非常复杂。

设置它会更新属性值（同步），也会触发"update the image data"算法。在这个算法中，一个新的 Request 会被准备好，但实际上只在下一个 microtask 发送 ，为了让脚本也改变 srcset 或 crossorigin值，甚至 src 本身。

那么资源的获取和图像的解码将完全异步。

所以是的，如果您将 DOM 视为一个 JS 对象，则 .src 属性正在同步设置，但这缺少此 [= 的大部分要点29=].

Answer 2

您的代码是同步的，但执行很可能不是。

基本上，浏览器必须执行 GET 请求才能呈现您的图像“selfie.jpg”。浏览器“决定”如何呈现它。

您可能需要参考 img 属性“解码”以获得更多见解和 tweeking。

MDN 网络文档说：

Provides an image decoding hint to the browser. Allowed values:

sync

    Decode the image synchronously, for atomic presentation with other content.
async

    Decode the image asynchronously, to reduce delay in presenting other content.
auto

    Default: no preference for the decoding mode. The browser decides what is best for the user.

Javascript 对 DOM 图像文件的 .src 分配是异步的吗？

Is Javascript assignment of .src against a DOM image file asynchronous?

javascript

dom

asynchronous

event-loop