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 😀
alcuadrado
13 años ago
No conocia esta opción, parece una mescla enter LAB.js y require.js, aunque de todos estos parece ser require el mas completo =)
PD: El javascript deberia ir justo antes de no en el 😛
Francisco
13 años ago
Muy util esta herramienta, tocara probarla y dar una conclusion.
Gabriel Porras
13 años ago
Este proyecto está super interesante pero tambié hay que tener cuidado con él. Dice que todavía no está listo para Producción.
Es más recomendable esperar… Y rogar para saquen una versión definitiva pronto.