이걸 모르면 초보? 자바스크립트 로드 방식 비교분석

이걸 모르면 초보? 자바스크립트 로드 방식 비교분석

이걸 모르면 초보? 자바스크립트 로드 방식 비교분석

 

자바스크립트에서 코드를 로드하는 방식은 여러 가지가 있습니다. 각각의 방식들은 로드 시점과 특성에 차이가 있으며, 이러한 차이들을 이해하는 것이 중요합니다. 웹 페이지를 만드는 데 필요한 요소 중 하나인 DOM(Document Object Model)은 HTML 문서의 구조를 표현하는 트리 형태의 객체 모델입니다. 이를 집이라고 생각할 수 있으며, 각 방(H1 태그, P 태그 등)과 가구(텍스트, 링크 등)로 이루어져 있습니다.

이번 글에서는 자바스크립트 코드를 로드하는 여러 가지 방식을 소개하고, 각 방식의 특징과 로드 순서를 살펴보겠습니다.

 

1. DOMContentLoaded 이벤트
   - 집이 거의 완성되었을 때, 가구 배치를 시작하는 것과 같습니다.
   - 이 시점에서 일부 가구(이미지, CSS)가 도착하지 않았을 수도 있습니다.

document.addEventListener("DOMContentLoaded", function() {
    // 이벤트 처리기
});

2. load 이벤트
   - 집이 완전히 완성되고, 모든 가구가 배치된 후 발생하는 이벤트입니다.
   - 모든 리소스가 로드되고 난 후일 때만 처리할 작업에 사용합니다.

window.addEventListener("load", function() {
    // 이벤트 처리기
});

3. script 태그의 async 속성
   - 가구 배치하는 동안 계속해서 집을 지어나가는 것과 비슷합니다.
   - 가구의 배치가 완료되면, 관련 일을 처리합니다.

<script async src="path/to/script.js"></script>

4. script 태그의 defer 속성
   - 집이 완성되기 직전에, 가구 배치를 시작합니다.
   - 설정된 순서대로 가구를 배치하며, 배치 과정에 순서가 중요할 때 사용합니다.

<script defer src="path/to/script.js"></script>

자바스크립트 코드 로드 시점의 빠른 순서는 다음과 같습니다:
1) DOMContentLoaded 이벤트 - 집이 거의 완성된 시점
2) async 속성 - 집 짓는 도중 가구 배치가 완료되는 시점
3) defer 속성 - 집 완성 직전에 가구 배치 시작하는 시점
4) load 이벤트 - 집이 완전히 완성되고 모든 가구가 배치된 시점

코드 로드 방식에 따라 로드 시점과 특성이 다름을 알 수 있습니다. 웹 페이지의 필요에 맞추어 적절한 로드 방식을 선택하는 것이 중요합니다.