Achievement Goals
Advanced Challenge
웹 브라우저가 작성된 코드를 해석하는 과정에서 <script> 요소를 만나면, 웹 브라우저는 HTML 해석을 잠시 멈춥니다.
HTML 해석을 잠시 멈춘 웹 브라우저는 <script> 요소를 먼저 실행합니다. <script> 요소는 등장과 함께 실행된다는 사실을 꼭 기억하세요.
이 <script> 태그를 추가하는 두 가지 대표적인 사례가 존재합니다.
하나는 <head> 태그에 추가하는 방법, 다른 하나는 </body> 가 끝나기 전에 추가하는 방법입니다.
<head> 안쪽에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
</body>
</html>
<body> 태그가 끝나기 전에 삽입하는 경우
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="msg">Hello JavaScript!</div>
<!-- script 요소 삽입 위치 -->
<script src="myScriptFile.js"></script>
</body>
</html>
두 방식의 공통점과 차이점
두 방식 모두 myScriptFile.js 내의 첫 번째 console.log를 성공적으로 출력하지만,
두번째 의 경우 제대로 출력하지 못하는 예시가 있습니다.
console.log('welcome JavaScript');
let msgElement = document.querySelector('#msg');
console.log(msgElement);
<head> 안쪽에 삽입하는 경우
<body> 태그가 끝나기 전에 삽입하는 경우
null이 나오는 이유
head에 script를 통해 자바스크립트를 수행한다면 body태그는 아직 파싱되기 전이기 때문에 자바스크립트에서 해당 태그가 무엇인지 알 수 없습니다. (null을 가지고 작업하게 됩니다)
이로인해 HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생합니다.
body 태그 최하단이 가장 좋은 이유
HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
위와 같은 상황을 막기 위해 script 태그는 body 태그 최하단에 위치하는 게 가장 좋습니다.
출처: 코드스테이츠