[javascript]스크립트 태그의 위치는 아무 곳이나 상관없을까?

스크립트 태그 위치

규칙1. 
html의 파싱(dom)은 위에서 아래로 한줄씩 이뤄짐
중간에 css 파일을 만나면 html 파싱을 멈추고 css 파싱(cssom)

스크립트 태그를 만날 시 html 파싱 중단, 
js 엔진에서 js 파일 다운 및 실행


방법 1. head 위치
- body가 파싱되기 전에 스크립트부터 동기적으로 파싱
- js 실행이 느리면, 빈 페이지가 보임

방법2. body 끝자락 위치
- 가장 많이 쓰는 방법
- html 페이지가 다 파싱된 이후에 js 파싱
- js 작업이 느리면, 무반응 페이지가 생성
- jsx의 경우, 불완전한 빈 페이지 생성


방법3. head위치 + async 속성
- 스크립트태그를 헤드 위치, async속성 부여
: js 파일 다운이 html 파싱과 비동기적으로 병렬 진행

- js 다운 후 실행 시, html 파싱 중단


방법4. head 위치 + defer 속성
- js 파일의 다운 및 실행까지 html 파싱과 병렬 진행
- html 파싱 완료 후 스크립트 실행. 따라서 body 끝자락에 위치한 것과 유사한 효과
- 속도 체감 상 가장 빠름


정리
- 스크립트는 동기적 로드 및 실행 시, html 파싱을 중단시킴
- 병렬 로딩은 html 파싱이 막히는 문제를 해결해주지만 스크립트의 순차적 실행을 보장하지 못함. 스크립트 간 의존성이 중요할 땐 주의해야 함