Q. 동일한 소스라도 브라우저마다 다르게 그려지는 이유는?
A. 모든 브라우저가 동일한 렌더링 엔진을 가지고 있지 않기 때문이다. 렌더링 엔진으로는 대표적으로 Safari의 Webkit, Webkit을 포크해 만든 Chrome의 Blink, FireFox의 Gecko 등이 있다.
Q. HTML에 JavaScript를 링크하기 위한 Script 태그를 Body 태그의 하단에 배치하는 이유는?
A. 렌더링 엔진은 HTML 문서를 한 줄씩 순차적으로 파싱하다가 자바스크립트 파일을 로드하는 script 태그를 만나면 DOM 생성을 일시 중단한다.
script 태그의 src에 정의된 자바스크립트 파일을 서버에 요청하여 응답받으면 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에게 제어권을 넘긴다.
자바스크립트 파싱이 끝나면 렌더링 엔진으로 다시 제어권을 넘기고 DOM 생성을 이어나간다.
만약 생성되지 않은 DOM을 조작한다면 에러가 발생할 수 있다. 따라서 body 요소 아래에 자바스크립트를 위치 시키거나 DOM 생성이 완료된 시점에 자바스크립트가 실행되도록 한다.
Read The Fucking MDN