window.onload() 및 DOMCountentLoaded 차이점

JavaScript에서 window.onload및 는 모두 DOMContentLoaded웹 페이지가 로드될 때 코드를 실행하는 데 사용되는 이벤트입니다. 그러나 로드 프로세스 중 서로 다른 지점에서 트리거되며 사용 사례도 다릅니다. 각각에 대한 설명은 다음과 같습니다.

window.onload

window.onload스타일시트, 이미지, 하위 프레임과 같은 모든 종속 리소스를 포함하여 전체 페이지가 완전히 로드되면 이벤트가 시작됩니다 . 즉, window.onload페이지의 모든 항목이 완전히 로드될 때까지 내부 코드가 실행되지 않습니다.

 

window.onload = function() {
    // Code to run when the full page is fully loaded
    console.log("The entire page is fully loaded, including all frames, objects, and images.");
};

 

사용 사례:

• window.onload코드를 실행하기 전에 모든 자산(이미지, CSS 파일, iframe)이 완전히 로드될 때까지 기다려야 하는 경우 사용하세요 . 예를 들어, 완전히 로드된 이미지에 의존하는 복잡한 이미지 갤러리나 캔버스 드로잉을 초기화합니다.

DOMContentLoaded

DOMContentLoaded스타일시트, 이미지 및 하위 프레임 로드가 완료될 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되면 이벤트가 시작됩니다 . DOMContentLoaded이는 HTML이 완전히 로드되고 구문 분석되자마자 내부의 모든 코드가 실행된다는 것을 의미합니다 .

 

document.addEventListener("DOMContentLoaded", function() {
    // Code to run when the DOM is fully loaded and parsed
    console.log("The DOM is fully loaded and parsed.");
});

 

사용 사례:

• DOMContentLoaded코드가 준비된 DOM에만 의존하고 반드시 외부 리소스에 의존할 필요는 없는 경우에 사용하세요 . 이는 이벤트 리스너를 버튼에 연결하거나 DOM을 조작하거나 외부 리소스에 의존하지 않는 JavaScript 라이브러리를 초기화하는 등 HTML 구조의 일부인 요소를 초기화하는 데 유용합니다.

요약

• window.onload: 모든 리소스를 포함하여 전체 페이지가 완전히 로드된 후에 실행됩니다. 모든 리소스의 전체 로드에 의존하는 코드에 적합합니다.
• DOMContentLoaded: 초기 HTML 문서가 완전히 로드되고 구문 분석된 후, 스타일시트, 이미지 등이 로드되기 전에 발생합니다. DOM만 준비되어야 하는 코드에 적합합니다.