codinghatso

window.onload VS DOMContentLoaded 본문

WEB/JavaScript_Diary

window.onload VS DOMContentLoaded

hatso 2024. 5. 6. 16:30

DOMContentLoaded와 window.onload는 모두 웹 페이지 로딩 과정에서 발생하는 이벤트입니다만, 각각의 이벤트가 발생하는 시점과 그 의미에는 중요한 차이점이 있습니다.

 

DOMContentLoaded

  • HTML문서가 완전히 로드되고 파싱 되었을 때 발생합니다.
  • DOM 트리가 완성되었으며, 스크립트 실행을 위한 준비가 완료된 상태입니다.
  • 외부 리소스(이미지, 스타일시트, 프레임 등)의 로딩을 기다리지 않습니다.

주요 포인트

실행 시점 : 이 이벤트는 HTML 문서가 완전히 파싱되고, DOM 트리가 완성되었을 때 발생합니다. 하지만 이미지, 스타일시트, 프레임 등 외부 리소스의 로드는 기다리지 않습니다.

사용 이유 :  이 이벤트 리스너는 문서가 완전히 로드되었을 때 JavaScript 코드가 실행될 준비가 되었음을 보장합니다. 즉, 스크립트가 실행될 때 필요한 HTML 요소들이 이미 DOM에 존재하고 접근 가능하다는 것을 확신할 수 있습니다.

 

예시: 아래 예시에서는 페이지 로딩이 완료되면 어떤 작업을 실행하는 간단한 함수를 등록합니다.

document.addEventListener("DOMContentLoaded", function () {
  console.log("문서가 준비되었습니다!");
  // 여기에 DOM 요소를 안전하게 조작할 수 있는 코드를 추가할 수 있습니다.
});



이 패턴을 사용하면 스크립트가 `<head>` 태그 안에 위치하더라도, 또는 문서의 상단에 있더라도 문서의 나머지 부분이 로드되기를 기다릴 필요 없이 안전하게 DOM 요소들을 조작할 수 있습니다. 이는 특히 외부 스크립트 파일을 사용할 때 유용합니다.

window.onload

  • 페이지에 포함된 모든 리소스(이미지, 스타링시트, 스크립트 파일 등)가 로드되었을 때 발생합니다.
  • 이는 문서의 HTML과 모든 종속 리소스가 로드된 후에 실행됨을 의미합니다.
  • 웹 페이지의 모든 요소가 완전히 로드된 후에 필요한 작업을 수행하려는 경우 사용됩니다.

동작 방식

window.onload = function() {
  console.log("모든 리소스가 로드되었습니다!");
  // 이 시점에서는 이미지, 스타일시트 등 모든 외부 리소스도 준비가 완료되어 있습니다.
};

 

고려할 점

  • DOMContentLoaded는 DOM이 준비된 직후 바로 발생하므로, 스크립트가 DOM 요소들을 조작하기에 적합한 시점에 실행됩니다. 이는 일반적으로 빠른 인터랙션을 위해 필요한 스크립트를 초기화하는 데 사용됩니다.
  • window.onload는 모든 리소스의 로드가 완료된 후에 필요한 작업을 수행해야 할 때 사용됩니다. 예를 들어, 페이지에 큰 이미지 파일이나 여러 외부 리소스가 포함된 경우 이를 모두 확인한 후에 특정 작업을 시작하고 싶다면 window.onload를 사용하는 것이 적합합니다.

이 두 이벤트의 차이점을 이해하는 것은 웹 페이지의 성능 최적화 및 사용자 경험 향상에 중요할 수 있습니다.

저작자표시

'WEB > JavaScript_Diary' 카테고리의 다른 글

JS Project 하면서 자주 사용한 패턴- 키워드 정리  (0) 2024.02.25
Array.from() 을 알아보자  (1) 2023.05.27
Element 속성 값 관련 API  (0) 2022.03.24
HTML 문서에 태그 삽입 API 2가지  (0) 2022.03.24
뷰포트에 상대적인 위치정보를 제공하는 API  (0) 2022.03.12
'WEB/JavaScript_Diary' Related Articles more
Comments