웹 페이지의 스크립트 실행 순서는 사용자 경험과 페이지의 기능성에 큰 영향을 미칩니다. 특히 jQuery에서는 $(document).ready()와 $(window).load()를 통해 스크립트가 실행되는 타이밍을 제어할 수 있습니다. 이 글에서는 두 가지 메서드의 차이점과 그 외 스크립트 실행 순서에 영향을 줄 수 있는 방법들을 설명하고, 실제 예제 코드를 통해 이해를 돕겠습니다.
1. $(document).ready()
$(document).ready()는 문서의 DOM이 완전히 로드된 후 실행됩니다. HTML 요소들이 준비된 상태에서 스크립트를 실행하고자 할 때 유용하며, 이미지, 스타일시트, 기타 리소스의 로딩은 기다리지 않습니다.
$(document).ready(function() {
console.log("DOM이 준비되었습니다!");
// 이 시점에서 DOM 요소에 접근할 수 있습니다.
});
이 코드는 페이지의 구조가 완전히 준비된 상태에서 실행되며, 이미지나 CSS 파일 로딩과 관계없이 동작합니다. 따라서 페이지의 빠른 로드 및 초기화가 필요한 경우 사용됩니다.
2. $(window).load()
$(window).load()는 페이지의 모든 요소 - 즉, 이미지, CSS, 비디오 등의 모든 리소스가 로드된 후 실행됩니다. 이 메서드는 페이지가 완전히 로드된 후에 실행되기 때문에, 로딩이 오래 걸릴 수 있는 이미지가 많을 경우 더 지연될 수 있습니다.
$(window).on('load', function() {
console.log("모든 리소스가 로드되었습니다!");
// 이미지와 기타 리소스가 준비된 상태에서 실행됩니다.
});
이 코드는 모든 리소스가 로드된 후에 실행되므로, 이미지나 동영상을 다룰 때 유용합니다.
3. 스크립트 실행 순서에 영향을 주는 다른 방법들
1. defer 속성
HTML의 <script> 태그에 defer 속성을 추가하면, 페이지가 완전히 파싱될 때까지 스크립트의 실행이 지연됩니다. defer는 페이지의 로딩을 최적화하는 데 유용하며, 모든 DOM이 준비된 후 실행됩니다. 하지만 async 속성과 달리 스크립트의 실행 순서는 유지됩니다.
<script src="example.js" defer></script>
2. async 속성
async는 스크립트를 비동기로 로드하여 로딩 시간 최적화를 돕습니다. 그러나 스크립트 실행 순서를 보장하지 않기 때문에, 순서가 중요한 경우 주의가 필요합니다.
<script src="example.js" async></script>
3. setTimeout과 setInterval
JavaScript의 setTimeout과 setInterval은 특정 시간 이후에 스크립트를 실행하거나 반복 실행하도록 예약합니다. 이를 통해 특정 이벤트 후 지연하여 실행할 수도 있습니다.
$(document).ready(function() {
setTimeout(function() {
console.log("1초 후에 실행됩니다.");
}, 1000);
});
4. 즉시 실행되는 스크립트 (페이지 상단에 위치한 스크립트)
스크립트가 <head> 또는 <body> 상단에 위치하면, 페이지 로딩 과정에서 해당 스크립트를 만나자마자 실행됩니다. 이 경우, 아직 DOM이 완전히 준비되지 않았기 때문에 DOM 조작을 시도할 경우 오류가 발생할 수 있습니다.
전체 실행 순서 예제
아래 예제는 $(document).ready(), $(window).load(), defer, async, 그리고 페이지 상단 및 하단 스크립트까지 모두 포함하여 각 스크립트가 어떤 순서로 실행되는지 보여줍니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Script 실행 순서</title>
<!-- 상단에 위치한 즉시 실행 스크립트 -->
<script>
console.log("상단 스크립트 실행");
</script>
<!-- async 속성의 스크립트 -->
<script src="async-script.js" async></script>
<!-- defer 속성의 스크립트 -->
<script src="defer-script.js" defer></script>
</head>
<body>
<h1>Hello World</h1>
<img src="large-image.jpg" alt="이미지" />
<!-- $(document).ready() -->
<script>
$(document).ready(function() {
console.log("$(document).ready() 실행");
});
</script>
<!-- $(window).load() -->
<script>
$(window).on('load', function() {
console.log("$(window).load() 실행");
});
</script>
<!-- 하단에 위치한 즉시 실행 스크립트 -->
<script>
console.log("하단 스크립트 실행");
</script>
</body>
</html>
예상 실행 순서
위 예제의 스크립트들이 실행되는 순서는 다음과 같습니다.
- 상단 스크립트 실행 - 페이지 상단에서 바로 실행됩니다.
- async 스크립트 실행 - async 스크립트는 비동기적으로 로드되며, 로드가 끝나는 즉시 실행됩니다. 따라서, 다른 스크립트와 무관하게 로드가 빨리 끝나면 먼저 실행됩니다.
- defer 스크립트 실행 - defer 속성이 있는 스크립트는 HTML 파싱이 완료된 후, 선언된 순서대로 실행됩니다.
- $(document).ready() 실행 - DOM이 준비된 후에 실행됩니다.
- 하단 스크립트 실행 - HTML 파싱이 완료되고 DOM이 준비된 상태에서 즉시 실행됩니다.
- $(window).load() 실행 - 페이지의 모든 리소스가 로드된 후 마지막으로 실행됩니다.
'Develop' 카테고리의 다른 글
| [JavaScript] a 링크에서 이동 없이 JavaScript 함수만 실행하기 (7) | 2024.11.29 |
|---|---|
| Java의 객체 지향 프로그래밍 원칙 (OOP Principles in Java) (6) | 2024.11.10 |
| [jQuery] click 이벤트와 touchend 이벤트의 차이점 및 예제 (6) | 2024.11.05 |
| [jQuery] document ready 와 window load의 차이와 사용법 (4) | 2024.11.04 |
| [PostgreSQL] WITH 문법 상황별 사용 예제 (3) | 2024.11.04 |