Descarga paralela de archivos JS

Uno de los grandes problemas de utilizar archivos javascript externos es que muchas veces pecamos de excesivos en su utilización, comprometiendo el rendimiento de nuestro sitio. Una posible solución es head.js

Una de las practicas más recomendadas es la de agregar todas las llamadas externas a códigos javascript al final de nuestro documento. Esto se debe a que si colocamos las llamadas en el head del documento el navegador va a comenzar la descarga de cada uno de los archivos, bloqueando la descarga del resto del sitio. Si el navegador utilizado es muy antiguo la situación empeora porque la descarga no continua hasta que se completan las descarga de los archivos externos.

El problema con cargar javascript desde abajo:

Problemas para implementar HTML5 Y CSS3. Si estas trabajando con características CSS3 o las nuevas etiquetas HTML 5 puede ocurrir que la visual se vea comprometida en navegadores como Internet Explorer, principalmente porque vamos a poder ver un Flash del contenido sin estilo, al menos hasta que se carga el JS que solucione estos problemas, para evitar esto head.js dispone de una serie de mecanismos para permitirnos detectar la versión del navegador como así también si las propiedades CSS están disponibles para su utilización.

Organizar nuestros javascript es más difícil. Cuando los comandos se incluyen en el fondo de nuestros documentos tenemos que tener en cuenta mucho más factores que si pudiésemos hacer la carga a gusto y seleccionando el orden y tipo de carga.

Ejemplos de implementación de head.js:

// Carga externa evitando el bloqueo del navegador
head.js("/path/to/file.js");

// Ejecutar una función luego de cargar un archivo
head.js("/path/to/file.js", function() {

});

// Carga de archivos en paralelo pero ejecutar en secuencia
head.js("file1.js", "file2.js", ... "fileN.js");

// Ejecutar luego que se cargaron esos archivos
head.js("file1.js", "file2.js", function() {

});

// Los archivos se descargan en paralelo pero se ejecutan en orden
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");

// Lo mismo de arribo escrito de otra forma
head.js("file1.js").js("file1.js").("file3.js");

Para evitar problemas de compatibilidad cruzada con los distintos navegadores la biblioteca de head.js nos brinda una serie de métodos de detección de compatibilidades con ciertas propiedades CSS, por ejemplo podemos detectar si el navegador soporta textshadow, en caso de hacerlo ejecutar determinada acción.

Todo esto lo podemos lograr con head.js, y lo mejor de todo es que solo pesa 2.30kb 😀