1

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:

introducir la descripción de la imagen aquí

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:

  1. ¿ Porqué ocurre este desfase en el inicio de la carga de las fuentes ?

  2. ¿ 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.

3
  • Antes de que un documento se renderiza ocurren tres fases: descarga ,parseo y ejecución (este último solo para scripts). El documento HTML se descarga y se empieza a leer línea por línea. Cuando encuentra un tag link, script o img, 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.
    – gugadev
    Commented el 16 feb. 2017 a las 21:44
  • Si un script puesto al último es más ligero que el primero, se descargará primero. En el caso de ejecución de scripts, se puede recurrir al atributo 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 dispare DOMContentLoaded).
    – gugadev
    Commented el 16 feb. 2017 a las 21:44
  • @Guz Gracias por tus comentarios. Eso que indicas lo realizo añadiendo el atributo src a mano, lo cual hace que automáticamente se inicie la descarga. El ultimo trozo del archivo es una llamada a webix.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 ?
    – Trauma
    Commented el 16 feb. 2017 a las 21:52

1 respuesta 1

2

Vale, ya lo descubrí.

Hice un

`setTimeout( function( ) { ...Algo que imprime... }, 3000 );

y las fuentes comenzaron a cargarse 3 segundos mas tarde que antes.

Buscando en Internet, usando los términos

javascript preload font

Me llevó a Fighting the @font-face FOUT

En dicha página se indica que el comportamiento de los browsers varía:

  • Intnernet Explorer descarga la fuente en cuanto ve algún elemento @font-face
  • Gecko, Webkit, y Opera, no descargan la fuente hasta que encuentran algún elemento HTML con un estilo que implica un elemento @font-face.
  • Otros browsers pueden tener otros comportamientos.

En la fecha del artículo, Octubre del 2009, no había ningún método estándar para precargar una fuente.

1
  • Es decir, en Gecko, Webkit y Opera se implementa una especie de lazy loading al cargar fuentes. Interesante, gracias por el enlace. Si viene de Paul Irish es una lectura de calidad ;)
    – gugadev
    Commented el 17 feb. 2017 a las 0:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.