<script defer>or<script type="module">
html parsing을 하다가 <script> </script> 를 만나면
parsing을 잠시 멈추고 js 파일을 다운로드 받고 제어권을 js 파일로 넘겨준다.
즉, html parsing이 다 끝나지 않아 html DOM이 다 완성되지 않은 상태에서 js 파일 속 코드가 실행되는 것이다.
이를 막는 방법은 크게 3가지가 있다.
방법 1.
<script> </script> 부분을 html 내부의 가장 아래로 내린다.
<html>
<head>
</head>
<body>
(중략)
</body>
<script>
</script>
</html> 이렇게 아예 <body></body> 밑으로 내리거나
<html>
<head>
</head>
<body>
(중략)
<script>
</script>
</body>
</html>이렇게 <body></body> 안에서 가장 밑으로 내리거나 하는 식이다.
방법 2.
내가 지금까지 써왔던 방식인데,
js 파일 안에서 DOM TREE가 모두 완성되고 나서 실행되길 바라는 부분은
document.addEventListner("load", 실행내용) 또는
document.addEventListener("DOMContentLoaded", 실행내용)
이렇게 따로 분리를 시켜놓는 방식이다.
방법3.
이건 이제 새로 알게된 방법인데,
<script> 안에 'defer' 를 넣어주어
<script defer src="./js파일이름.js">
이런 식으로 두는 것이다.
그러면 html parsing을 하다가 <script defer>를 만났을 때,
script를 다운로드는 하지만 html 문서 parsing을 멈추지 않고 끝까지 수행하고 script를 실행하는 시점은 parsing이 끝났을 때가 된다.
이렇게 하면, html parsing과 js를 다운받는 것이 병렬적으로 동시에 진행되기 때문에 DOM이 로드되는 시점이 늦춰지지 않고, 따라서 메모리가 비교적 작은 모바일 환경에서 화면 로딩 속도가 빨라질 수 있다.
하지만, modern javascript 에서는 defer 를 잘 쓰지 않고
대신 type="module" 을 주로 사용한다고 한다.
이 module 안에는 defer 기능도 들어가 있고, 추가적으로 다른 기능들도 들어가 있는데, 이에 대해서는 따로 글을 쓰도록 하겠다.
