El js introducido externamente se muestra más lento que el script en la página
Si sus archivos JS externos tardan en cargarse, es posible que el código JavaScript se ejecute antes de que se cargue por completo y se analice cuando se carga la página. Si en este punto parte del código JavaScript que está utilizando en su página depende de variables o funciones en archivos JS externos, esto hará que vea errores "indefinidos" u otros mensajes de error en la consola del navegador.
Para evitar esto, una posible solución es colocar el código JavaScript de su página en una función autónoma y no ejecutar esta función hasta que la página haya terminado de cargarse. De esta manera, su código puede comenzar a ejecutarse tan pronto como se carguen los archivos HTML y JS externos en la página, evitando errores "indefinidos". Aquí hay un ejemplo simple:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script src="path/to/external.js"></script>
</head>
<body>
<h1>Hello, world!</h1>
<script>
window.addEventListener('load', function() {
// This code will execute when the page has finished loading
// and all external JavaScript files have been downloaded and parsed.
// Any variables or functions defined in external.js will be available here.
// Your JavaScript code here...
});
</script>
</body>
</html>
En este ejemplo, colocamos el archivo JS externo (external.js) en el HTML y envolvemos el código JavaScript de nuestra página en un detector de eventos. El evento de carga se activa después de que se hayan cargado toda la página y todos sus recursos asociados. Esto significa que dentro del detector de eventos, su código puede acceder de manera segura a las variables y funciones definidas en el archivo JS externo.