AJAX 관련 스크립트 프로그래밍을 하는 사람들은 거의 알 성 싶은 팁일 듯.
클라이언트 스크립트로 골머리를 앓아 본 적이 있다면, HTML 페이지에 클라이언트측 스크립트를 넣으면서 '위치상으로는 맨 위에 박혀 있어도 실행은 맨 나중에 되었으면 좋겠다...'와 같은 생각을 해본 적이 있을 것이다. 어떤 경우에 그렇냐고? 뭐... include같은 걸로 포함되어 매 페이지마다 수행되어야 하는 코드가 있는데, 그 코드들보다 먼저 수행되어야 하는 코드가 있는데 이 코드는 코드 레이아웃상 아랫 부분에 위치해야되고 ... 아 뭐 어쨌든 살다보면 그런 일이 생긴다. 따지지 말자.
그럴 경우에 현재 html 페이지에서 수행되는 <script> 블록의 순서를 변경할 수 있다. 다음 코드를 보자 :
<body onload="document.getElementById('plain').innerHTML += '<p>0: onload write';">
<div id="plain">Plain Text</div>
<script>
document.onreadystatechange=fnStartInit;
function fnStartInit()
{
document.getElementById('plain').innerHTML += '<p>0: doc state:'+document.readyState;
}
</script>
<script>
document.getElementById('plain').innerHTML += '<p>1: just write';
</script>
<script defer="defer">
document.getElementById('plain').innerHTML += '<p>2: defer write';
</script>
<script>
document.getElementById('plain').innerHTML += '<p>3: and just write';
</script>
<script defer="defer">
document.getElementById('plain').innerHTML += '<p>4: and defer write';
</script>
</body>
뭐 별다른 것은 없고, <script> 블록에 defer라는 속성이 추가된 것을 볼 수 있는데, 이 속성은 해당 <script> 블록의 수행을 페이지 렌더링 이후로 미루게 된다. <body> 요소의 렌더링 순서와 비교해보면서 살펴보면 클라이언트측의 렌더링 타이밍을 가늠해 볼 수 있을 것이다. 결과는 다음과 같다 :
Plain Text
1: just write
3: and just write
2: defer write
0: doc state:interactive
4: and defer write
0: doc state:complete
0: onload write
* interactive 상태는 상황에 따라 다르게 나타날 수 있다.
