JavaScript中给DOM Image对象赋值.src属性的操作是异步的吗？

核心结论 #

你对src属性赋值动作的认知是对的，赋值操作本身是同步执行的，大家所说的「异步」指的是赋值后触发的图片加载全流程，二者指向的是完全不同的执行阶段。

具体执行逻辑拆分 #

• 同步执行环节：
  JS引擎执行到myImage.src = "selfie.jpg"时，会立刻完成两个同步操作：

  1. 给DOM元素的src属性完成赋值，你在这行代码后立刻读取myImage.src可以直接拿到刚设置的地址，不存在延迟
  2. 向浏览器的资源调度模块发送加载指定图片的指令，发送动作本身也是同步完成的
     整个赋值过程不会等待任何后续操作，会立刻执行下一行JS代码。

• 异步执行环节：
  浏览器收到图片加载指令后，会在独立的后台线程完成「网络请求下载、图片解码、渲染准备」全流程，这个过程完全不会阻塞主线程的JS执行和UI渲染，属于异步任务。等流程执行完成（成功/失败）后，才会将对应的load/error事件回调推入主线程的事件队列，等待主线程空闲时执行。
  这也就是为什么你不能在赋值src后立刻读取图片的实际宽高、加载状态等信息——此时异步加载流程还没走完：

  const myImage = document.querySelector("#my-image");
  myImage.src = "selfie.jpg";
  // 此时图片还没加载完成，输出为0
  console.log(myImage.naturalWidth); 
  
  myImage.onload = () => {
    // 加载完成回调触发后才能拿到正确的图片信息
    console.log(myImage.naturalWidth); 
  }
  

认知疏漏点 #

你混淆了「属性赋值这个动作本身」和「赋值触发的后续关联操作」的属性，其他人提到的异步指的是后续的图片加载流程，不是src属性赋值这个动作本身，二者描述的不是同一个环节，所以才会产生认知冲突。

内容的提问来源于stack exchange，提问作者dungarian