Q. 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고, JavaScript를 불러오기 위해 <script> 요소를 <body> 요소가 끝나기 직전에 위치 시키는 이유가 무엇인가요?
📖 [관련 블로깅 보러가기] 브라우저 렌더링 과정
📖 [관련 블로깅 보러가기] HTML에 JS 연결하는 방법 비교
CSS를 head 안에 불러오는 이유는 의미있고 스타일링 되있는 완전한 웹페이지를 더 빨리 볼 수 있게 하기 위해서 입니다.
이 방식을 사용하면 HTML과 CSS를 동시에 파싱하게 됩니다.
브라우저는 렌더링을 할 때 HTML을 파싱한 결과인 DOM 트리와 CSS를 파싱한 결과인 CSSOM 트리를 합쳐 렌더 트리를 만들어 렌더링을 하게 되는데, 완전한 웹페이지를 볼 수 있는 좀 더 빠른 렌더링을 원한다면 이와 같은 방식이 필요합니다.
Javascript를 body 요소 맨 끝에 불러오면 HTML을 모두 파싱하고 Javascript 다운 및 실행합니다.
body 맨 끝이 아닌 head에 불러오면 HTML 파싱 중간에 Javascript를 다운받고 실행한 다음 나머지 HTML 파싱을 진행하기 때문에 Javascript에서 선택하는 DOM 구조가 아직 파싱되지 않아 에러가 발생할 수 있습니다.
하지만 body 맨 끝에 불러오는 경우 HTML이 모두 파싱되고 Javascript가 다운 및 실행 되기 때문에 Javascirpt가 적용되지 않는 HTML 문서를 사용자가 볼 수도 있습니다.
이러한 현상을 방지하기 위해 head 안에 defer 속성을 사용하여 Javscript 불러옵니다. 이 방식을 사용하면 HTML 파싱과 Javascript 다운을 동시에 실행한 다음 HTML 파싱이 끝나면 Javascript를 실행하기 때문에 body 맨 끝에 불러올 때의 문제를 해결함과 더불어 렌더링 시간도 단축됩니다.
