Carga contenido de terceros asíncronamente

[chuidiang]

Hola:

Si pones tag script con código javascript, este código javascript se carga mientras se carga como un tag más de la página, es decir, el resto de la página deja de cargarse hasta que el script está totalmente cargado y ejecutado.

Si al tag script le pones async, ejemplo <script async src="....">, el código javascript se carga en background mientras el resto de la página sigue cargándose. El código javascript se ejecutará en cuanto se pueda al acabar de cargarse, independientemente de que el resto de la página se haya terminado de cargar o no.

Si al tag script le pones defer, ejemplo <script defer src="....">, el código javascript se carga en background mientras el resto de la página sigue cargándose. El código javascript se ejecutará cuando toda la página se haya cargado.

El código que has puesto, añade el tag script dinámicamente, es decir, tu código html no tiene ese tag script inicialmente, sino que el código lo añade, creando un element script, poniéndole async, indicándole cual es la fuente del código (.src=url) e insertándolo junto al resto de tag script que ya existan en la página.

Tal cual dice el texto que has puesto, para evitar que la carga de scripts de terceros ralentice la carga de la página, bastaría ponerlo de la forma tradicional con async

<script async src="fuente de terceros.js"...>

El mecanismo aquí explicado (createElement, src=url y insertBefore) suele usarse para no cargar muchos scripts sean necesarios o no. Con tag <script....> se cargarían solo aquellos que son estrictamente necesarios y luego, en función de alguna condición o acción de usuario, como usar un determinado navegador, tener un determinado idioma, etc, se cargarían dinámicamente unos scripts u otros. Por ejemplo, imagina una aplicación javascript multilingüe con textos en javascript. Podrías cargar inicialmente un <script> con todos los textos de todos los idiomas, o bien podrías cargar un pequeño <script> que detecte el idioma del navegador o pregunte al usuario qué idioma prefiere y luego usar este mecanismo para cargar dinámicamente el script con los textos en el idioma elegido.

Se bueno.