script 태그 위치와 onload, DOMContentLoaded, ready
script는 아무 데나 넣을 수 있다. 그러나 아무 데나 놔서는 안된다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded</title>
</head>
<body>
<script>
var target = document.querySelector('div');
console.log(target);
</script>
<div>시작</div>
<div>중간</div>
<div>끝</div>
</body>
</html>
|
이 코드는 아래와 같은 결과가 나온다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded</title>
</head>
<body>
<div>시작</div>
<script>
var target = document.querySelector('div');
console.log(target);
</script>
<div>중간</div>
<div>끝</div>
</body>
</html>
|
이 코드는 아래와 같은 결과가 나오고..
뻔한 중간은 건너뛰고 script를 </body> 바로 위에 위치시키면
그제서야 비로소 의도한 결과를 얻을 수 있다
즉 스크립트 태그는 어디든 위치할 수 있지만
HTML 파싱과 DOM 생성이 완료된 후 작동할 수 있게 가장 하단에 위치시키는 것이 가장 좋다는 말이다.
실제로 브라우저는 HTML을 읽어가는 중에 script 태그를 만나면 html파싱을 중단하고
자바스크립트 코드를 로드해서 파싱한 후 그 과정이 끝나면 다시 html을 파싱하기 때문.
그러나 상황에 따라 스크립트 태그를 </body> 직전에 두기 힘든 경우도 있을 수 있다.
그렇기에 실무에선 DOMContentLoaded 이벤트와 load를 사용한다. DOM Tree 분석이 끝나면 DOMContentLoaded 이벤트가 발생하며, 그 외 모든 자원(이미지, 동영상 등등..)이 다 받아져서 브라우저에 렌더링까지 다 끝난 시점에 Load가 발생한다. 보통 DOM Tree가 다 만들어지면 DOM에 접근할 수 있기 때문에 주로 DOMContentLoaded를 사용한다.
설명한 내용은 콘솔에 찍어서 확인해 볼 수도 있다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded</title>
</head>
<body>
<script>
window.onload = function(){
var target = document.querySelectorAll('div');
console.log(target);
console.log("afterwindowload");
}
document.addEventListener("DOMContentLoaded", function() {
var target = document.querySelectorAll('div');
console.log(target);
console.log("afterdomload");
});
var later = document.querySelectorAll('div');
console.log(later);
console.log("바로시작")
</script>
<div>시작</div>
<div>중간</div>
<div>끝</div>
</body>
</html>
|
이렇게 스크립트 태그를 바디 열림 태그 바로 아래 위치 시키고
onload, DOMContentLoaded, pure 순서대로 콘솔에 찍어보면
그냥 쓴 건 가장 먼저 실행되지만 dom을 찾지 못하고
그 이후 DOMContentLoaded 이벤트 안에 있는 콘솔 내용이 찍히고
onload 안에 있는 콘솔 내용이 찍히는 걸 확인할 수 있다
결론 : 실행되는 자바스크립트 코드는 DOMContentLoaded 안에 보관하자!
ps. DOMContentLoaded 와 jQuery의 Ready는 같다. jQuery 쓰시는 분들은 Ready 쓰세요!
참고 :
[LECTURE] 2) DOMContentLoaded 이벤트 : edwith
들어가기 전에 로딩 이후에 자바스크립트 동작이 이뤄지는 것이 일반적입니다. 자바스크립트가 실행돼야 할 가장 적절한 타이밍은 언제일까요? 학습 목표 DOM ContentLoaded ... - 부스트코스
www.edwith.org
HTML에서 script태그는 어디에 위치해야 할까?
처음 html, javascript를 공부 할 때는 script 태그는 head 태그에 위치하게끔 하는 코드나,또는 body 태그의 어디에 위치하건 그 위치에 대해 별 의미를 두지 않는 코드들이 많았다.하지만 지금은 항상 스크립트는 body…
junhobaik.github.io