자바스크립트 삽입 위치

브라우저는 HTML과 CSS를 렌더링 하는 도중, 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될 때 까지 브라우저 렌더링을 멈춘다.

그렇기 때문에 자바스크립트 코드 삽입 위치에 따라 브라우저 렌더링 속도에 영향을 끼치게 된다.

 

크게 아래 두가지 위치에 삽입할 수 있는데,

 

1) head

 - 문서를 초기화 하거나 설정하는 가벼운 스크립트 위주

- DOM 구조가 필요한 스크립트의 경우 document.onload와 같은 로드 이벤트가 추가되어야 함

2) </body> 앞

 - 브라우저가 렌더링이 완료된 상태에서 스크립트 실행,

 - DOM 구조가 완료된 시점에 실행됨

 - 대부분의  스크립트 위치로 추천되는 위치