Defer y Async: <script/>

• defer

  El atributo defer indica al navegador que no espere por el script. En lugar de ello, debe seguir procesando el HTML, construir el DOM. El script carga “en segundo plano” y se ejecuta cuando el DOM esta completo. Fuente.

  <p>...contenido previo script...</p>
  
  <script defer src="<https://javascript.info/article/script-async-defer/long.js?speed=1>"></script>
  
  <!-- Inmediatamete visible -->
  <p>...contenido posterior al script...</p>
  

• async

  Los scripts async cargan en segundo plano y se ejecutan cuando están listos. El DOM y otros scripts no esperan por ellos, y ellos no esperan por nada. Un script totalmente independiente que se ejecuta en cuanto se ha cargado. Fuente.

  <p>...contenido previo a los scripts...</p>
  
  <script>
    document.addEventListener('DOMContentLoaded', () => alert("¡DOM listo!"));
  </script>
  
  <script async src="<https://javascript.info/article/script-async-defer/long.js>"></script>
  <script async src="<https://javascript.info/article/script-async-defer/small.js>"></script>
  
  <p>...contenido posterior a los scripts...</p>
  

Terminando el proyecto

• Debemos hacer la inserción de content para tenerlo visualmente, justo antes del catch.

  content.innerHTML = view;
  

• Para el catch, se debe agregar la estructura (podemos editar la salida como queramos):

  catch (err) {
  	console.log(err);
  }
  

• Para conectar el index.html con el main.js, se agrega un script con la raíz del proyecto:

  <script defer src="./assets/main.js"></script>
  

Desplegando el proyecto

• Para el deploy se hace la implementación de Github pages (mostrar nuestro código html dentro del repositorio).