2011. 8. 29. 20:17ㆍWEB
의문사항
Javascript는 어떤 순서로 실행될까요?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
alert('Hello World');
</script>
</head>
<body>
</body>
</html>
예를 들어 위와 같은 단순한 예제를 보고 다음의 의문이 떠오르지 않나요?
- <Head>내부의 JQuery Library구문을 만났을 때 JQuery Library를 모두 받기 전에 바로 아래의 alert()가 실행될까요? 아니면 JQuery Library를 모두 다운로드하고 Library를 실행 완료한 다음 라인을 실행할까요?
- 위의 예제가 실행되는 도중 JQuery 서버폭주로 인해 JQuery Library를 받을 수 없는 상태일 때 과연 어떻게 될까요? Javascript Library Link 하나 때문에 페이지가 멈춰버릴까요?
실험코드 작성!
실험하기 위해서 다음과 같은 코드를 작성하고 실험해보았습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<script type="text/javascript">
var intCounter = 0;
</script>
<script type="text/javascript" src="javascript/before.js"></script>
<script type="text/javascript">
alert('middle' + intCounter++);
</script>
<script type="text/javascript" src="javascript/after.js"></script>
</head>
<body>
<span>JavaScript Download Test</span>
</body>
</html>
참조하고 있는 before.js와 after.js는 각각 1MB의 대용량 파일로써 최 하단에 각각 alert(‘before’ + intCounter++);, alert(‘after’ + intCounter++);를 포함하고 있습니다. 만약 브라우저가 before.js를 만났을 때 before.js를 모두 다운로드하기 전에 alert(‘middle’ + intCounter++);가 실행될까요?
결과
- Firefox 7
- IE 9
- Chrome 13
IE9, Firefox 7, Chrome 13에서 테스트 결과, 모든 Javascript는 어떤 상황에서도 순서대로 실행되는 것으로 확인되었습니다!! 즉, Javascript Library가 하나라도 다운로드 되지 않는다면? 그것도 실험해보았는데, 페이지 로드 자체가 되지 않습니다.
즉 Javascript Library를 참조하실 때 주의를 기울여주셔야 하겠습니다. 반대로 CSS도 실험해보았는데, CSS나 Image 등 기타 참조된 파일들은 다운로드 여부와 상관없이 모든 HTML이 정상적으로 Parsing되게 됩니다.
결론!
“Javascript 다운로드 속도는 전체 페이지의 로드 속도에 엄청난 영향을 미친다!!” 그러니까 특별한 이유가 없다면 Javascript 참조는 Site와 같은 서버에 올려 두는 것이 최상이 아닐까!
'WEB' 카테고리의 다른 글
| [ASP.NET] Global.asax Events (0) | 2012.04.02 |
|---|---|
| [ASP.NET] 익명사용자를 위한 Profile 구성 (0) | 2012.03.14 |
| [IIS7] web.config에서 HttpModules, HttpHandlers 사용 시 오류 처리 (1) | 2011.09.15 |
| [ASP.NET] 명시적인 캐스팅으로 성능향상 (0) | 2010.05.10 |
| Multi Project Debugging (0) | 2009.11.06 |