HTML 파일을 브라우저 렌더링 할때 다음과 같은 순서로 렌더링한다.


<head> 태그 -> <head> 태그 내 script, link (stylesheet) 


-><body> 태그 -><body>태그 내 이미지, 문서요소


그런데.....


만약에 <head>태그 구조가 다음과 같다고 해보자>

<head>

<script src="file1.js"></script>

<script src=" file2.js"></script>

<script src=" file3.js"></script>

<script src=" file4.js"></script>

<script src=" file5.js"></script>

</head>


웹 페이지를 들어오는 사용자들은 5개의 js파일을 보기 전에는 웹페이지의 어떤 구조도,이미지도 

볼 수 없다는 말이 된다. 


일반적으로 사이트의 외관 구성은


css(link 태그) + body 태그로 구성하게 되는데, 저뒤에 숨어있는 자바스크립트 파일들이

 

맨 위에 위치하는 바람에 사이트가 어떻게 생겼는지를 보여주기도 전에 한참을 기다려야 하는것이다.


이에 대한 해결책으로 


yahoo에 근무하며, 'High Perfomance Web Site' 를 저술한 Steve Souder


'put script to bottom!'(스크립트는 바닥에 넣으세요.) 라고 말했다.


즉, </body>바로 위에 스크립트 태그를 몰아넣으면, 

<head>와 <body>의 내용을 전부다 불러온 후에, 스크립트 파일을 로드하기 시작하기 때문에,

위와 같은 문제를 해결 할 수 있다.


또 한가지 방식으로는 'defer'속성인데, script에 defer 속성을 주는것이다.


<script src="file1.js" defer="defer"></script>


위와 같이 말이다. 그러면 모든 파일이 로드 된 후에 스크립트를 로드하기 시작한다.(window.onload 이벤트와 거의 동시 시작)


게다가 HTML 4.01에 포함된 표준이다! 근데 왜 </body> 위에 스크립트를 놓는 방법을 소개했는지 궁금하지 않은가?


....표준이지만.............IE에서..........만 지원된다.


인터넷 익스플로러의 장점도 찾게되고, 살다보니 별일이다.


--------------------------------------------------

 ‘Put Scripts at the Bottom 에서 속도 차이를 직접 확인해보시라.


(여담이지만 script 태그를 불러오는 순서는 직렬 방식으로, 위의 예로 보면


file1.js ->file2.js -> file3.js ... 순으로 처리하지만, link 태그같은 경우는 병렬식으로 link 태그의

 스타일 시트를 불러옴과 거의 동시에 body태그를 렌더링 하기시작하므로 크게 문제가 되지 않는다.)