[JavaScript] script 태그 위치와 defer
Lpla
·2021. 3. 10. 22:03
반응형
자바스크립트는 html의 어디에 위치하는게 좋을까?
자바스크립트는 head 안에 혹은 body 위쪽에 <script src="..."> 형태로 사용한다.
브라우저는 html을 위쪽부터 읽으며 내려오다가 <script>를 만나게 되면 DOM 생성을 멈추고 외부 script 파일을 읽는다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js/script1.js"></script>
<script src="js/script3.js"></script>
</head>
<body>
<script src="js/script2.js"></script>
</body>
</html>
script1.js
document.body.prepend('script1.js');
console.log('script1.js');script2.js
document.body.prepend('script2.js');
console.log('script2.js');script3.js
document.body.prepend('script3.js');
console.log('script3.js');
script1.js 와 script3.js 는 head에 있고 script2.js 는 body 에 있다.
결과
script1.js 와 script3.js 는 body가 생성되기 전에 실행되기 때문에 에러가 발생한다.
반면 script2.js 는 body가 생성되고 마지막에 실행되기 때문에 정상적인 결과가 출력된다.
이처럼 head 보다 body 에 script 태그를 추가하는 것이 안전하다.
하지만 head 에 사용하고 싶다면 defer를 사용해 위 문제를 해결할 수 있다.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="js/script1.js" defer></script>
<script src="js/script3.js" defer></script>
</head>
<body>
<script src="js/script2.js"></script>
</body>
</html>
결과
script 태그에 defer 속성을 사용하면 브라우저가 html을 읽을 때 <script>를 만나더라도 DOM 생성을 멈추지 않고 html을 계속 읽어 들인다.
그리고 defer 속성이 있는 script 태그는 DOM이 준비가 된 이후에 실행된다.
html이 모두 파싱되기 전에 script가 실행되는 불상사를 막을 수 있는 것이다.
반응형
