[SOLUCIONADO] Carga contenido de terceros asíncronamente

[Cotelandia]

Leyendo por ahí sobre optimizar la carga de una página me encontre con este artículo:

¿Quién nunca ha cargado contenido de terceros para incrustar un video de YouTube o un botón de like/tweet?

El gran problema es que esos códigos no son siempre distribuidos eficientemente, ya sea por la conexión del usuario, o la conexión del servidor donde se alojan. O este servidor puede estar caído temporalmente o incluso estar bloqueado por el firewall del usuario o su compañía.

Para evitar que esto se convierta en un problema crítico, o peor, bloquee la carga de la página completamente, siempre carga estos códigos asíncronamente

Código Javascript:

var script = document.createElement('script'),
scripts = document.getElementsByTagName('script')[0];
script.async = true;
script.src = url;
scripts.parentNode.insertBefore(script, scripts);
 

Ahora mi pregunta es.. ¿que logra ese código? y en caso de servir ¿donde tendría que ubicarlo en mi html?

[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.

[Cotelandia]

Iniciado por chuidiang

...

Gracias :)