Sobes.tech
Junior

Para que os scripts são normalmente conectados no final da tag body?

sobes.tech IA

Resposta da IA

Para evitar bloqueios na renderização da página e garantir o acesso aos elementos DOM imediatamente após o seu carregamento.

Ao incluir scripts no <head> ou no início do <body> sem os atributos async ou defer, o navegador suspende a análise do HTML e a renderização da página até que o script seja carregado e executado. Isso desacelera o desempenho visível do site.

Incluir no final do <body> garante que a árvore DOM já esteja completamente formada no momento da execução do script, permitindo interagir diretamente com os elementos sem precisar usar manipuladores de eventos como DOMContentLoaded ou load apenas para acessar os elementos.

Os atributos async e defer são alternativas modernas que oferecem opções mais flexíveis para carregar scripts sem bloquear a análise do HTML:

  • async: O script é carregado de forma assíncrona e executa imediatamente após o carregamento, sem esperar que o DOM seja completamente carregado. A ordem de execução dos scripts assíncronos não é garantida.
  • defer: O script é carregado de forma assíncrona e executa após a análise completa do HTML, mas antes do evento DOMContentLoaded. Scripts com defer são executados na ordem em que aparecem na marcação.