¿Cómo se cargan y ejecutan los archivos JavaScript?

Question

No suelo ver charlas o investigaciones sobre la carga/ejecución del archivo JavaScript. Me interesan los sitios que explican cómo se maneja JavaScript. En particular, si tengo

<script src="a.js"></script> 
<script src="b.js"></script> 
<script src="c.js"></script> 

supongo a.js se descarga primero, luego b.js y finalmente c.js o están siendo descargados al mismo tiempo? ¿Qué hay de la ejecución? ¿Los scripts en el encabezado son preferidos a los que están en el cuerpo?

La razón principal por la que estoy tan interesado en este tema es porque estoy escribiendo un software de JavaScript que utiliza carga dinámica de estos scripts y, a veces, recibo errores como x no está definido (no se ha cargado antes que otros scripts), pero generalmente esos errores no ocurrirán. No entiendo por qué.

Answer 1

Los scripts se descargan en paralelo, pero se analizan y se ejecutan en el orden en que aparecen en el HTML, bloqueando otras acciones en la página (incluido el renderizado) hasta que se hayan ejecutado. Es posible que los scripts no sean bloqueantes, si se agregan mediante código JavaScript a través del DOM por ejemplo, o si el async attribute está presente en las últimas versiones de Firefox.

Answer 2

Lo que controla la descarga de JavaScript es principalmente su navegador. Si los carga todos desde el mismo dominio, como lo hace anteriormente, se cargarán uno después del otro, por lo tanto, se cargarán en el orden que especifique.

Como una simple prueba, simplemente puede intentar especificar funciones en cada uno de los archivos e intentar llamarlos desde el siguiente archivo de la lista, para que pueda ver el orden que cargan.

En cuanto a la precedencia de la carga, la mayoría de los libros de optimización de sitios web le indicarán que cargue sus archivos js en la parte inferior, ya que esto cargará más rápido y el archivo js se cargará como el último recurso necesario . Esto debe hacerse con cuidado, si sus páginas confían en el JavaScript directamente al cargarlo, puede terminar con errores js interminables.

Las bibliotecas como jquery ayudarán mucho con eso, ya que solo permitirán que ocurra la acción js, una vez que el DOM esté disponible, de ahí que no haya errores js cuando js se cargue en la parte inferior del HTML.

Otra cosa interesante que hacer, es asegurarse de mantener sus archivos js minificados correctamente, y mantener un mínimo de archivos q, al hacerlo, solo está haciendo unas pocas solicitudes de servidor, y tendré su JavaScript disponible en menos tiempo.

Espero que esto te ayude.