Javascript를 body 태그의 가장 아래에 위치시키는 이유는?

1. 렌더링이란?

• 렌더링이란 HTML, CSS, Javascript등 개발자가 작성한 문서를 브라우저에서 그래픽 형태로 출력하는 과정을 말한다.
• 렌더링 엔진은 가능하면 HTML 문서가 파싱될 때까지 기다리지 않고, Layout과 Paint 과정을 시작한다.

2. Javascript 처리 과정

• HTML 파서는 Script 태그를 만나면 Javascript 코드를 실행하기 위해 DOM(Document Object Model) 생성 프로세스를 중지하고, Javascript 엔진으로 제어 권한을 넘긴다.
• 제어 권한을 넘겨 받은 Javascript 엔진은 Script 태그 내의 자바스크립트 코드 또는 Script 태그의 src attribute 에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다.
• 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다.

 

3. Javascript를 body 태그의 가장 아래에 위치시키는 이유는?

• HTML 파서는 script 태그를 만나면 파싱을 멈추고 스크립트 파일을 읽기 때문에 DOM 생성이 지연되어 스크립트 파일이 많거나 파일이 크면 읽는 시간이 오래 걸려 Display에 표시되는 것이 지연된다.
• DOM tree가 완성되지 않은 상태에서 Javascript가 DOM을 조작한다면 에러가 발생할 수 있다.

 

4. Script 태그의 속성으로 로딩 순서 제어하기

 

async

<script async src="script.js">

• script 태그를 만나도 HTML parsing이 중단되지 않고, script 로드와 html parsing이 함께 이루어지다가 script 로드가 끝나면 script가 실행되는 시점에 HTML  parsing이 잠시 중단되고 실행이 끝나면 HTML parsing이 재개됨.

Script 태그에 async 속성이 적용된 경우

defer

<script defer src="script.js">

• script 태그를 만나도 script 로드의 시작부터 끝까지 html parsing이 중단되지 않고, parsing이 끝난 뒤에야 script가 실행됨.

Script 태그에 defer 속성이 적용된 경우

5. Script 내부에서 로딩 순서 제어하기

• DOMContentLoaded와 onload, ready를 활용하면 javascript 자체에서 로딩 순서를 제어할 수 있다.

 

 

참조 URL

• https://velog.io/@takeknowledge/script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C%EC%9A%94
• https://junhobaik.github.io/js-script-position/
• https://velog.io/@yhe228/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC-rok5h9zpqd
• https://jeong-pro.tistory.com/90
• https://boxfoxs.tistory.com/408