Dlaczego skrypty zwykle podłącza się na końcu tagu body?
sobes.tech AI
Odpowiedź od AI
Aby zapobiec blokowaniu renderowania strony i zapewnić dostęp do elementów DOM zaraz po ich załadowaniu.
Podłączanie skryptów w <head> lub na początku <body> bez atrybutów async lub defer powoduje, że przeglądarka wstrzymuje parsowanie HTML i renderowanie strony do czasu załadowania i wykonania skryptu. To spowalnia widoczną wydajność witryny.
Podłączenie na końcu <body> gwarantuje, że drzewo DOM jest już w pełni utworzone w momencie wykonywania skryptu, umożliwiając bezpośrednią interakcję z elementami bez konieczności używania obsługi zdarzeń typu DOMContentLoaded lub load tylko do dostępu do elementów.
Atrybuty async i defer to nowoczesne alternatywy, które oferują bardziej elastyczne opcje ładowania skryptów, nie blokując parsowania HTML:
async: Skrypt jest ładowany asynchronicznie i wykonywany zaraz po załadowaniu, bez czekania na pełne załadowanie DOM. Kolejność wykonywania skryptów asynchronicznych nie jest gwarantowana.defer: Skrypt jest ładowany asynchronicznie i wykonywany po pełnym parsowaniu HTML, ale przed zdarzeniemDOMContentLoaded. Skrypty zdefersą wykonywane w kolejności ich pojawienia się w dokumencie.