Cuando cargamos una página web con imágenes y otros elementos dentro de ella los mismos son cargados por el navegador simultáneamente a la carga del código HTML de la página, por lo tanto mientras vamos viendo la carga se producen varias "sub-cargas" en segundo plano. Con la mayoría de los archivos pasa esto, pero con los archivos Javascript, el código Javascript y otros archivos que no vamos a mencionar no sucede esto. En este caso cuando el navegador encuentra por ejemplo un archivo Javascript lo que hace es detener el resto de las cargas hasta terminar con la carga de dicho archivo haciendo que si el código del script es lento la página se cargue lenta también. Por suerte hay una solución desde hace un tiempo con variantes y consiste en cargar Javascript al finalizar la carga de la página o lo que se llama de manera asincrónica:
Atributo Javascript Async
Con tan solo agregar este atributo nos garantizamos que el código Javascript se ejecutará ni bien termine la carga del script pero simultáneamente a la carga de la página. No establece orden de carga de los scripts y se cargan antes del evento load().
Ejemplo:
<script async type="text/javascript" src="archivo.js"></script>
Atributo Javascript Defer
Este atributo es muy parecido al anterior que casi no se puede hablar de diferencias. La gran diferencia es que con este atributo el script no se ejecuta hasta que no haya finalizado la descarga de la página, en cambio en anterior lo hacia mientras se cargaba. Al igual que en el atributo anterior el script se carga antes del evento load() pero respetando el orden de aparición.
Ejemplo:
<script defer type="text/javascript" src="archivo.js"></script>
Crear etiquetas Javascript dinámicas
Este método es algo antiguo pero no por eso deja de ser excelente y, sobre todo, compatible con navegadores en sus versiones anteriores y las nuevas obviamente. El mismo consiste en crear una función llamada include() que es homónima de la utilizada por PHP para incluir scripts dentro del código de otro script. La función lo que hace es cargar el script que se le pase como parámetro en el momento en que se llama, es decir si usamos esta función al final del código HTML habremos cargado toda la página y luego cargado el script simulando los atributos anteriormente vistos Async y Defer, y en algunos casos mejor que eso.
Ejemplo:
<script type="text/javascript">
//<
;
nuevo.setAttribute("type", "text/javascript";
nuevo.setAttribute("src", archivo);
document.getElementsByTagName("head"[0].appendChild(nuevo);
}
//]]>
</script>
Luego en cualquier parte de la página llamamos a la función:
<script type="text/javascript">
include("archivo.js";
</script>
//También podemos usarla dentro de un enlace o botón:
<a href="javascript:include('archivo.js');">Cargar script</a>
Atributo Javascript Async
Con tan solo agregar este atributo nos garantizamos que el código Javascript se ejecutará ni bien termine la carga del script pero simultáneamente a la carga de la página. No establece orden de carga de los scripts y se cargan antes del evento load().
Ejemplo:
<script async type="text/javascript" src="archivo.js"></script>
Atributo Javascript Defer
Este atributo es muy parecido al anterior que casi no se puede hablar de diferencias. La gran diferencia es que con este atributo el script no se ejecuta hasta que no haya finalizado la descarga de la página, en cambio en anterior lo hacia mientras se cargaba. Al igual que en el atributo anterior el script se carga antes del evento load() pero respetando el orden de aparición.
Ejemplo:
<script defer type="text/javascript" src="archivo.js"></script>
Crear etiquetas Javascript dinámicas
Este método es algo antiguo pero no por eso deja de ser excelente y, sobre todo, compatible con navegadores en sus versiones anteriores y las nuevas obviamente. El mismo consiste en crear una función llamada include() que es homónima de la utilizada por PHP para incluir scripts dentro del código de otro script. La función lo que hace es cargar el script que se le pase como parámetro en el momento en que se llama, es decir si usamos esta función al final del código HTML habremos cargado toda la página y luego cargado el script simulando los atributos anteriormente vistos Async y Defer, y en algunos casos mejor que eso.
Ejemplo:
<script type="text/javascript">
//<![CDATA[
function include(archivo){
var nuevo = document.createElement("script"
; nuevo.setAttribute("type", "text/javascript"
; nuevo.setAttribute("src", archivo);
document.getElementsByTagName("head"
[0].appendChild(nuevo); }
//]]>
</script>
Luego en cualquier parte de la página llamamos a la función:
<script type="text/javascript">
include("archivo.js"
; </script>
//También podemos usarla dentro de un enlace o botón:
<a href="javascript:include('archivo.js');">Cargar script</a>