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태그를 렌더링 하기시작하므로 크게 문제가 되지 않는다.)
'차근차근 > JAVA Script' 카테고리의 다른 글
| JavaScript Output (0) | 2016.02.15 |
|---|---|
| JavaScript Where To (0) | 2016.02.15 |
| 호환성체크 | 팝업 | 오늘 하루 이 창을 열지않기 (0) | 2015.11.10 |
| 이미 클릭하면 팝업창띄우고 닫기버튼 누르면 새 페이지띄우기 (0) | 2015.11.04 |
| ie8 , ie9 , ie10 팝업 , 호환성보기 설정 체크 (0) | 2015.11.02 |