Registrando un async javascript, declarativo (estático) vs dynamic

¿Hay alguna diferencia en declarar mi async javascript estáticamente vs dinámicamente?

estático

   ...   ... 
...

dinámica

   ...   ... 
var myScript = document.createElement("script"); myScript.src = 'https://foo.bar/myscript.js'; myScript.async = !0; myScript.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(myScript); ...

Observé que declarar una secuencia de comandos de forma estática permite que un navegador la detecte antes y la precarga (chrome + firefox).

Mi objective es cargar un javascript en modo async para no bloquear la ejecución de HTML y otras secuencias de comandos. Sametime, quiero que se ejecute tan pronto como se descargue, teniendo en cuenta que requiere que un elemento ya esté en el DOM. Una vez descargado, el script se ejecuta y accede al div de my-script-needs-me . Una limitación, no puedo cambiar el script en sí mismo.

admite parámetros asíncronos que permiten hacer que esta llamada sea asíncrona.

La segunda forma que describió le permite tener la url como parámetro y enlazarla. También permite el uso de una callback para hacer algunas cosas cuando se carga la secuencia de comandos.

 let scriptElement = document.createElement('script'); let url = `https://maps.googleapis.com/maps/api/js?key=${apiKey}`;//&libraries=geometry scriptElement.src = url; //Chargement de l'API Google scriptElement.onload = () => { //API chargée, on peut lancer l'initialisation du composant this._initializeMap(); }; 

Lo usé para cargar la API de Google Maps, no está directamente en el HTML, así que puedo modificar la URL cuando se carga mi página. Y cuando se carga la API, inicio tratamientos que necesitan esta API.

puede usar defer para eso en lugar de asincrónico.

su script se ejecutará inmediatamente después de analizar html .

Estático

   ...   ... 
...

Como sabes, HTML se analiza en la parte superior. Por lo tanto, si se coloca dentro de la etiqueta body, tan pronto como se analice, si se trata de un IIFE o si el archivo myscript.js contiene una function call , se ejecutará de inmediato.

Entonces, adentro, body , ponlo en la parte inferior de la hoja te ayudará a ejecutarlo después de que el div haya cargado.

Pero no podemos garantizarlo debido al almacenamiento en caché.

Si el navegador guarda en caché el script y si es un IIFE o contiene una llamada de función, no podemos predecir el comportamiento.

Dinámica

En dynamic también, depende del orden.

   ...   ... 
...

En ambos casos, aparecerá después de los contenidos HTML.

La mejor manera de asegurarse de que se carga solo después de que se carguen todos los contenidos es

Dando un eventListener en la ventana.

Verifica el código a continuación

   ...   ... 
...

Marque esta línea window.addEventListener("DOMContentLoaded",load); .

DOMContentLoaded es similar a jQuery’s $(document).ready() . Activará la función de callback cuando el HTML esté cargado correctamente. Por lo tanto, no es necesario verificar la existencia del elemento HTML.

Por lo que he aprendido, es mejor ir con forma static para declarar un script asíncrono (en mi escenario particular) que dynamic . Aquí algunos de por qué (s):

  1. static async navegador detecta la statement del script static async y se inicia de inmediato (en la parte superior del procesamiento de la página);
  2. (diferido del n. ° 1) un navegador coloca la solicitud de script antes en la cola de solicitudes y si tiene suficiente (30-40 solicitudes por carga de página) podría ser crucial estar en las primeras 10 solicitudes, no en la posición 30-40;
  3. agregar una secuencia de comandos dinámicamente al head del body no introduce ninguna ventaja de rendimiento contra la statement static , siempre y cuando toda la head ya esté procesada y no demore la ejecución de la secuencia de comandos declarada estáticamente;
  4. En el momento en que lleguemos a la statement del script, static funcionará instantáneamente porque ya está precargado y listo para ejecutarse (en la mayoría de los casos, async es crucial aquí) mientras que la statement del script dynamic iniciará la solicitud para descargar el script y solo después de ejecutarlo;

Espero que mis pensamientos también ayuden a alguien.