Para cargar simultaneamente los archivos necesarios para mi aplicación, utilizo el siguiente index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link id="SKIN" rel="stylesheet" charset="UTF-8">
</head>
<body>
<script src="config.js" charset="UTF-8"></script>
<script src="spin.min.js" charset="UTF-8"></script>
<script id="ROUTIE" type="text/javascript" charset="UTF-8"></script>
<script id="CORE" type="text/javascript" charset="UTF-8"></script>
<script id="APP" type="text/javascript" charset="UTF-8"></script>
<!-- Para seleccionar la versión, y mostrar el spinner. -->
<script>
// Escogemos la APP. Este código DEBE IR AQUÍ.
( function( ) {
if( CONDICIONES )
window.APP = 'FSKIN' ;
// Aquí va otro código, donde obtengo el valor del skin.
document.getElementById( 'SKIN' ).href = skin;
document.getElementById( 'ROUTIE' ).src = 'routie-0.3.2.min.js';
document.getElementById( 'CORE' ).src = 'core.js';
document.getElementById( 'APP' ).src = 'full.js';
} )( );
</script>
<script type="text/javascript" charset="UTF-8" src="webix/webix.js"></script>
<script>
// Lanzamiento.
webix.ready( function( ) {
APP.Run( );
} );
</script>
</body>
</html>
La secuencia de bajada que obtengo es la siguiente:
Como se observa, las fuentes son las últimas en descargarse, tiempo después de terminar la descarga del archivo webix.css
.
Estoy aprendiendo Javascript. No se si esto es una consecuencia del .css
utilizado (reconozco mi ignorancia en .css
), o algo relativo al código que uso.
Ahora, las preguntas:
¿ Porqué ocurre este desfase en el inicio de la carga de las fuentes ?
¿ Como puedo solucionarlo ?
EDITO
No me fijé en el inicializador de la descarga. El texto completo es
webix_debug.js:4961
y el contenido de esa línea en cuestión es
var x = this._viewobj.parentNode.offsetWidth||0;
No veo que exista relación entre esto y el desfase en el inicio de la carga.
link
,script
oimg
, se descarga el contenido del recurso externo y se parsea. Lo interesante aquí es que no se asegura el orden en el que termina la descarga de los scripts, estilos o imágenes.defer
:<script defer src="/js/algo.js"></script>
. Lo que hace este atributo es que no bloquea la carga del documento para ser ejecutado, si no que espera a que se descargue y parsee todo el documento y allí se empiezan a ejecutar los scripts en el orden establecido (antes que se dispareDOMContentLoaded
).src
a mano, lo cual hace que automáticamente se inicie la descarga. El ultimo trozo del archivo es una llamada awebix.ready( callback )
, lo cual me garantiza que no se llamará al callback hasta que todo el contenido esté descargado, incluidos los scripts que bajo a mano. Es igual que$.ready( )
. Lo curioso son las fuentes. Si se indican en el.css
... ¿ no deberían de bajarse justo después de bajar el.css
?