¿Debo usar el aplazamiento en la secuencia de commands que ya están justo antes de la label del cuerpo inferior?

Esta pregunta siempre me ha molestado cada vez que pongo mis files js en la parte inferior de la página. si coloco todos los files js en la parte inferior antes de la label de cierre del body entonces creo que el browser primero downloadá todas las hojas de estilo y html, luego analizará el html y el css y al final enviará requestes de files js. Asi que,

  • El uso de defer en los files js que ya están en la base, ¿hace alguna diferencia?
  • ¿Los scripts no diferidos están al final justo antes de que la label corporal represente el locking?

Otra pregunta que tengo es si puse todo el file js en la cabeza y uso defer . ¿Sería esto equivalente a colocar todos los files js en la parte inferior? ¿Vería js con diferir en la head el browser hacer una request al server y luego continuar descargando el rest del file html o solo solicitará al server después de download todo html y css?

Por lo que sé, async es equivalente a defer y la única diferencia es que js se ejecutará cuando se descargue sin respetar el order de los files. Asi que,

  • ¿Utilizaría la async en los files js que ya están en la parte inferior, pero a exception del order en el que se ejecutan?

Mirando a través de la especificación de HTML 5.2 para Scripting, se encuentra esta ilustración que W3C usa.

Lo que vemos aquí es que el uso de defer recupera el script mientras se analiza el HTML, pero espera hasta que el análisis finalice antes de la ejecución.

async , por otro lado, se obtiene junto con el análisis sintáctico, y una vez que se completa la búsqueda, la representación HTML se pausa para ejecutar el script.

Dado que la ejecución de HTML es sincrónica, se puede suponer que el uso de defer en los scripts colocados justo antes de </head> sería casi como colocarlos justo antes de </body> .

Sin embargo, como dice Chris Moschini , no confiaría en el defer . Creo que esta respuesta de StackOverflow en su set explicaría mejor cómo el defer afecta la carga de JavaScripts.

Lo que podría estar buscando es la funcionalidad del browser para saber si el DOM está completamente cargado. de MDN :

 <script> document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); }); </script> 

Entonces puedes poner tu javascript donde sea, ya que se ejecuta cuando el dom está completamente cargado

El atributo defer es un atributo boolean.

Cuando está presente, especifica que el script se ejecuta cuando la página ha finalizado el análisis.

Nota: El atributo defer es solo para scripts externos (solo debe usarse si el atributo src está presente).