const myImage = document.querySelector("#my-image"); myImage.src = "selfie.jpg";Me dijeron que el código anterior es asíncrono. ¿Es asíncrono?
Pensé que simplemente estaba configurando la propiedad src en el objeto myImage. No estoy usando devolución de llamada o promesa. Es un simple 2 líneas de código. Así que creo que es sincrónico. ¿Me estoy perdiendo de algo?
Todo depende de lo que entiendas por "asignación de .src".
El atributo HTMLImageElement.src IDL es bastante complejo en este sentido.
Configurarlo actualizará el valor del atributo (sincrónicamente), también activará el algoritmo "actualizar los datos de la imagen" . En este algoritmo, se preparará una nueva Solicitud, pero en realidad se enviará solo en la siguiente microtarea , para permitir que el script también cambie los valores de srcset o crossorigin , o incluso el propio src .
Entonces, la obtención del recurso y la decodificación de la imagen serán completamente asincrónicas.
Entonces, sí, si ve el DOM como un objeto JS, la propiedad .src se establece de forma síncrona, pero falta la mayor parte del punto de esta propiedad.
Su código está sincronizado, pero es muy probable que la ejecución no lo esté.
Básicamente, el navegador debe realizar una solicitud GET para mostrar su imagen "selfie.jpg". El navegador "decide" cómo representarlo.
Es posible que desee consultar el atributo img "decodificación" para obtener más información y ajustes.
MDN Web Docs dice:
Proporciona una sugerencia de decodificación de imágenes para el navegador. Valores permitidos:
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.