반응형
둘 다 window.onload와 DOMContentLoaded는 문서가 로드된 후 JavaScript 코드를 실행하는 데 사용됩니다. 그러나 이 두 방법은 트리거되는 시점에서 중요한 차이가 있으며, 약간 다른 시나리오에서 사용됩니다.
window.onload
window.onload이벤트는 이미지, 스타일시트 및 iframe과 같은 모든 종속 리소스를 포함하여 페이지 전체가 완전히 로드될 때까지 기다립니다.- 외부 리소스가 완전히 로드될 때 스크립트가 필요할 경우 유용할 수 있습니다.
DOMContentLoaded
DOMContentLoaded이벤트는 스타일시트, 이미지 및 서브프레임을 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생합니다.- 일반적으로 HTML이 로드되고 구문 분석되는 즉시 스크립트를 실행할 수 있기 때문에 대부분의 경우 선호됩니다.
어느 것을 사용할까?
이미지 슬라이더와 같은 UI를 제어하는 스크립트를 실행하는 경우, HTML 문서가 완전히 구문 분석되자마자 JavaScript가 실행되도록 하기 위해 DOMContentLoaded를 사용하는 것이 좋습니다. 이렇게 하면 모든 이미지 및 기타 리소스를 기다리지 않고 DOM 요소를 사용할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>window.onload 예제</title>
</head>
<body>
<h1>안녕하세요, 세계!</h1>
<img src="large-image.jpg" alt="큰 이미지">
<script>
window.onload = function() {
console.log('페이지 전체가 로드되었습니다, 이미지와 스타일과 같은 모든 종속 리소스를 포함하여.');
};
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOMContentLoaded 예제</title>
</head>
<body>
<h1>안녕하세요, 세계!</h1>
<img src="large-image.jpg" alt="큰 이미지">
<script>
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM이 완전히 로드되고 파싱되었습니다, 그러나 일부 리소스는 여전히 로드 중일 수 있습니다.');
});
</script>
</body>
</html>주요 차이점:
• 타이밍: DOMContentLoaded는 스타일시트, 이미지, 하위 프레임의 로드를 기다리지 않기 때문에 window.onload보다 훨씬 빨리 발생합니다.
• 사용 사례:
• DOM이 준비되자마자 JavaScript를 초기화해야 하는 경우 DOMContentLoaded를 사용합니다.
• 페이지의 모든 콘텐츠(이미지 및 스타일시트 포함)에 의존하는 작업을 수행해야 하는 경우 window.onload를 사용합니다.각 이벤트의 사용 시기:
• DOMContentLoaded: UI 구성 요소를 초기화하거나, 이벤트 리스너를 설정하거나, DOM이 사용할 수 있게 되자마자 조작하는 작업에 이상적입니다.
• window.onload: 모든 리소스가 로드된 후에 수행해야 하는 이미지 슬라이더 설정 또는 이미지가 완전히 로드된 후 크기가 결정되는 요소에 대한 작업에 적합합니다.적절한 이벤트를 선택하면 스크립트가 최적의 시간에 실행되어 성능과 사용자 경험이 향상됩니다.
반응형
'UX 개발 > JS' 카테고리의 다른 글
| 템플릿 리터럴(Template Literals) 속 HTML 포맷팅, 하이라이팅 하기 (0) | 2024.06.25 |
|---|---|
| 자바스크립트로 여러 CSS 클래스 추가하기 (0) | 2024.06.11 |
| 동적 임포트(Dynamic Import) 이해하기 (0) | 2024.04.26 |
| forEach() IE 11 호환 오류 문제 대응하기 (0) | 2023.06.02 |
| HTML 페이지(정적 웹사이트) 비밀번호로 접근권한 제어하기 (0) | 2022.10.14 |
