6

Tengo una aplicación web que carga varios ficheros de JavaScript de la siguiente manera (simplificada, en realidad tengo 8-10 ficheros):

<script src="codigo1.js"></script>
<script src="codigo2.js"></script>
<script src="codigo3.js"></script>
<script src="codigo4.js"></script>

Algunos de esos ficheros son muy grandes y tardan en cargarse, así que estaba pensando en usar defer o async para que no afectaran a la carga de la página en general. Pero me encuentro con un problema: algunos de esos ficheros son dependientes de la carga de los otros.

Por ejemplo, codigo4.js utiliza información que se carga en codigo1.js y codigo2.js. Pero codigo1.js es un archivo bastante más grande que codigo4.js, por lo que si cargo los scripts de manera asíncrona podría darse el caso de que codigo4.js se ejecutase antes que codigo1.js.

¿Hay alguna manera de usar defer o async pero manteniendo el orden de ejecución indicado en el código? ¿Qué alternativas tengo?

3 respuestas 3

7

Utiliza defer:

Traduccion libre de la especificiación:

Hay tres modos posibles, si selecciona async el script se ejecuta de forma asincronica, tan pronto este disponible (descargado). Si no esta especificado async pero si defer el script es ejecutado al terminar de parsear la pagina. Si ninguno de los atributos esta presente, el script se carga de forma sincronica pausando el parseo de la pagina.

Luego, como explica en el punto 15 (traducción simplificada)

Si el elemento tiene src y defer y no tiene atributo async, El script se arega al final de la lista de scripts que serán ejecutados cuando se termine de parsear el documento.

Esto significa, que los scripts con defer se ejecutan luego de cargar y parsear la pagina y en el orden que se encuentran en el DOM lo cual resuelve tu problema de dependencias.

Piensa en esto como una cola de <script> que se ejecutan cuando se termina de parsear el html.

1
  • 2
    Genial, y gracias por poner un enlace a la especificación oficial. Estaba mirando online y parece que puede fallar en IE9 y anteriores, pero realmente no me importa porque no doy soporte a esos navegadores.
    – Alvaro Montoro
    Commented el 20 sept. 2016 a las 14:49
3

Ya te han dado respuestas, sin embargo yo te ofrezco la alternativa de usar la asombrosa librería require.js. Elige cuando cargar tus archivos, en vez de cargarlos todos a la vez.

Evita escribir tantas etiquetas <script> en el documento html, eso no es nada profesional. Programa de manera modular y organizada. Todo en su debido lugar y a su debido tiempo.

Solo es mi humilde opinión y recomendación. Más información aquí.

3

Primero que nada, es importante que añadir codificación UTF-8 a los archivos javascript. Esto es para que soporte tildes, á é í ó ú, por ejemplo, en vez de codigo, será código.

<meta charset="utf-8" ></meta>

Lo siguiente soluciona el problema de los scripts que dependen de otros. La idea es que los archivos que dependen de otro, no se agreguen al html, sino que hay que agregar otro archivo en la lista de scripts.

Por ejemplo, aquí no se carga el codigo2.js, solo carga el codigo1.js, y además el esperador.js, que debe estar al principio, se encargará de cargar el primero.

<script src="esperador.js"></script>
<script src="codigo1.js"></script>

Lo que hace es esperar medio segundo a que cargue una variable del primer archivo, codigo1.js, esa variable tiene que estar previamente declarada, en mi caso se llama variable_código1_js.

Contenido del archivo esperador.js.

function cargarCódigo(archivo)
{
    var código = document.createElement("script")
    código.src = archivo
    código.onload = function(){this.remove()}
    document.head.appendChild(código)
}
function esperarDependencia()
{
    if(variable_código1_js)
    {
        cargarCódigo("codigo2.js")
    }
    else
    {
        setTimeout(esperarDependencia,500)
    }
}
esperarDependencia()

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.