자바스크립트의 로딩(Loading)과 실행(Execution) 순서는 브라우저 환경에 따라 다르게 동작하며, 이는 웹 페이지 성능과 스크립트 간 의존성 관리에 중요한 영향을 미칩니다.
브라우저별 로딩/실행 차이
- Internet Explorer: <head> 내부와 외부 모두에서 비동기 로딩되지만, 동기 실행됩니다.
- 비 IE 브라우저(Chrome, Firefox, Safari 등):
- <head> 내부: 비동기 로딩
- <head> 외부<body> 영역): 동기 로딩
- 실행은 항상 동기적으로 이루어집니다.
async와 defer 속성
- async (HTML5): 외부 스크립트를 비동기로 실행합니다. 스크립트가 다운로드되는 즉시 실행되며, 실행 순서는 보장되지 않습니다.
- defer (IE 특성): 페이지 로딩이 완료될 때까지 스크립트 실행을 지연시킵니다. DOM 구조가 모두 파싱된 후에 실행되며, 선언된 순서를 유지합니다.
로딩과 실행의 핵심 규칙
- 로딩(Loading): <script> 태그가 <head> 외부에 있으면 동기 로딩으로, 이후 태그의 로딩이 차단됩니다. <head> 내부에 있으면 비동기 로딩으로 차단되지 않습니다.
- 실행(Execution): 동기 실행 방식으로, 앞선 스크립트의 로딩이 완료될 때까지 이후 스크립트 실행이 대기합니다.
실전 예제: test.jsp와 test_logic.jsp
<!-- test.jsp -->
<script type="text/javascript" src="<%=basePath %>order/test_logic.jsp"></script>
<script type="text/javascript" src="<%=basePath %>js/myReservation.js"></script>
<script type="text/javascript">alert('111111111111111');alert(test);</script><!-- test_logic.jsp -->
<%
Thread.currentThread().sleep(10*1000);
response.getWriter().write("var test = 1;");
%>위 코드에서 test_logic.jsp가 10초 동안 지연되므로, 이후 스크립트(myReservation.js와 인라인 alert)는 이 로딩이 완료될 때까지 실행되지 않습니다. 따라서 alert('test')는 정상적으로 1을 출력합니다.
JavaScript 코드 블록(Code Block)
코드 블록은 <script> 태그로 구분되는 단위입니다. 브라우저는 코드 블록 단위로 컴파일하고 실행하며, 블록 간에는 변수와 함수가 공유됩니다.
<script type="text/javascript">
alert(str); // str 미정의 → 오류 발생, 이후 코드 실행 안 됨
alert("나는 코드 블록 1");
var test = "나는 코드 블록 1 변수";
</script>
<script type="text/javascript">
alert("나는 코드 블록 2"); // 정상 실행
alert(test); // "나는 코드 블록 1 변수" 출력 (변수 공유)
</script>위 예제에서 첫 번째 블록에서 오류가 발생했지만, 두 번째 블록은 독립적으로 실행되며 이전 블록의 변수 test에 접근 가능합니다.
선언형 함수 vs. 표현식 함수
<script type="text/javascript">
function Fn() { /* 선언형 함수 */ }
var Fn = function() { /* 표현식 함수(익명 함수 할당) */ }
</script>- 선언형 함수(Function Declaration): JavaScript의 사전 컴파일 단계에서 미리 호이스팅되어, 선언 위치와 상관없이 코드 블록 내 어디서든 호출할 수 있습니다.
- 표현식 함수(Function Expression): 변수 할당 시점에만 함수가 정의되므로, 그 이전에는 호출할 수 없습니다.