window.onload
< script >는 어디에 위치하는 것이 좋을까?
JavaScript파일을 load하는 script태그는 body 태그의 끝나기 직전에 위치하는 것이 성능이 좋다는 말을 들어본 적이 있을 것이다.
하지만 왜 그럴까?
window의 onload객체를 공부하면서 이해한 부분을 정리해보고자 한다.
다음과 같은 코드가 있다고 해보자.
...
<head>
<script>
var btn = getElemenetById('btn');
btn.addEventListener('click', function() {
alert('Hello World!!');
})
</script>
</head>
<body>
<input type="button" id="btn" value="hello world" />
</body>
...
결과는 어떻게 될까?
이상한 점을 발견했는가?
위의 코드는 Cannot read property ‘addEventListener’ of null.
즉, null 값에서는 addEventListener 속성을 읽을 수 없다는 에러가 뜬다.
코드를 차근차근 살펴보면 답이 나온다. 컴퓨터는 코드를 위에서 부터 차례대로 읽어나간다. head의 script태그를 만나 읽어나가는데 ‘btn’ id를 가진 태그를 불러오라는 명령을 받지만, btn이라는 id를 가진 input태그는 밑에 body태그에 존재한다.
한마디로 현재 알고 있는 코드중에는 btn이라는 id를 가진 태그는 없다. 따라서 null값을 할당하고 error를 발생시킨다.
그럼 어떻게 해야할까?
첫번째 방법은 script태그를 전체 코드를 다 읽고 난 후에 읽히도록 하는 방법이다. 그럴 때 사용하는 것이 바로 window객체의 onload함수이다. 이는 전체 코드를 다 읽은 후 실행하라는 명령어이다.
<head>
<script>
window.onload = function(){
var btn = getElemenetById('btn');
btn.addEventListener('click', function() {
alert('Hello World!!');
})
}
</script>
</head>
<body>
<input type="button" id="btn" value="hello world" />
</body>
두번째 방법은 body태그가 닫히기 직전에 script태그를 넣는 것이다.
<head>
</head>
<body>
<input type="button" id="btn" value="hello world" />
<script>
var btn = getElemenetById('btn');
btn.addEventListener('click', function() {
alert('Hello World!!');
})
</script>
</body>
두 가지 방법중 어떤 방법이 더 좋은 방법일까?
성능면으로 봤을 때 두번째 방법이 더 좋은 방법이다.
왜냐하면 window.onload 함수는 전체 코드를 다 읽을 때까지 script 밑의 코드를 실행시키지 않는다. 따라서 사용자는 밑에 코드를 한번 다 읽고 올 동안 빈 화면을 보고있어야 한다.
하지만 두 번째 방법은 먼저 위의 코드들을 다 실행하고 맨 마지막에 script를 만나기 때문에 미리 페이지를 load하고 script파일을 실행시킬 수 있게 된다.
댓글
댓글 쓰기