아랄라랄라
R 스토리
아랄라랄라
전체 방문자
오늘
어제
  • All (198)
    • Web (145)
      • Markup | WEB (9)
      • Styles (45)
      • javascript (32)
      • jquery (28)
      • vue (16)
      • react (10)
      • more (5)
    • IT (31)
      • CS (3)
      • git hub (5)
      • UI | UX (18)
      • more (5)
    • ETC (22)
      • 이슈노트 (12)
      • 스터디 (10)
      • 아랄라 ☞☜ (0)
      • JOB🛠 (0)

인기 글

반응형
hELLO · Designed By 정상우.
아랄라랄라
Web/javascript

[자바스크립트] DOMContentLoaded, load 차이

[자바스크립트] DOMContentLoaded, load 차이
Web/javascript

[자바스크립트] DOMContentLoaded, load 차이

2023. 4. 14. 10:23





 DOMContentLoaded 
이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생한다.

스타일시트, 이미지, 하위 프레임의 로딩은 기다리지 않는다.

 

즉, 스타일시트, 이미지, 하위 프레임이 로드를 완료할 때까지 기다리지 않고 초기 HTML 문서가 완전히 로드되고 구문 분석되었을 때 발생한다.

 

 

- 기본 사용법

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');
});

 

- 지연

<script>
  document.addEventListener("DOMContentLoaded", (event) => {
    console.log("DOM fully loaded and parsed");
  });

  for (let i = 0; i < 1_000_000_000; i++);
  // This synchronous script is going to delay parsing of the DOM,
  // so the DOMContentLoaded event is going to launch later.
</script>

 

- 로딩이 이미 완료되었는지 확인

function doSomething() {
  console.info("DOM loaded");
}

if (document.readyState === "loading") {
  // Loading hasn't finished yet
  document.addEventListener("DOMContentLoaded", doSomething);
} else {
  // `DOMContentLoaded` has already fired
  doSomething();
}

 

 

 


 

 

다음은 chatGPT에 물어본 결과이다.

 

 

DOMContentLoaded 이벤트는 HTML 문서의 모든 DOM 트리가 구성된 후에 발생하는 이벤트입니다. 이 이벤트는 문서의 로드가 완료되지 않은 상태에서도 발생합니다.

DOMContentLoaded 이벤트는 다음과 같은 경우에 유용합니다.

 

  1. 스타일 시트가 로드되기 전에 스크립트가 실행되는 것을 방지할 수 있습니다.
  2. 문서 객체 모델이 완전히 로드되기 전에 스크립트를 실행하면 불필요한 오류를 방지할 수 있습니다.
  3. AJAX 또는 fetch와 같은 비동기 작업에서 이벤트를 사용하여 DOM에 결과를 적용할 수 있습니다.

 

이벤트를 등록하려면, DOMContentLoaded 이벤트를 처리할 함수를 작성하고 이벤트를 등록하면 됩니다. 다음은 DOMContentLoaded 이벤트를 처리하는 예제입니다.

document.addEventListener('DOMContentLoaded', function() {
  // DOM이 모두 로드된 후 실행되는 코드
});

 

이벤트가 발생할 때 실행되는 함수는 DOM 트리가 완성되었기 때문에, 이 시점에서 DOM 요소에 접근하여 조작할 수 있습니다.

 

 

 

 


 

 

 

 

 load  이벤트는 스타일시트, 이미지, 하위 프레임의 모든 종속 리소스를 포함하여 전체 페이지가 로드되면 발생한다.

 

addEventListener("load", (event) => {});

onload = (event) => {};

 

 

 


 

 

 

 

DOMContentLoaded 와 load의 차이점에 대해 chatGPT에 물어본 결과이다.

 

 

DOMContentLoaded와 load 이벤트는 모두 문서의 로드 상태를 감지하는 이벤트입니다. 그러나 둘 사이에는 몇 가지 차이점이 있습니다.

DOMContentLoaded 이벤트는 HTML 문서의 로드가 완료되지 않은 상태에서도 발생합니다. 즉, 문서의 외부 리소스인 이미지, 스타일시트 등이 아직 로드되지 않은 상태에서도 발생합니다. DOMContentLoaded 이벤트는 HTML 문서의 DOM 트리가 완전히 로드되고 파싱되어 브라우저가 렌더링할 준비가 되었을 때 발생합니다. 따라서, DOMContentLoaded 이벤트는 DOM 조작과 같은 일부 작업을 실행하는 데 유용합니다.

반면에 load 이벤트는 HTML 문서와 모든 외부 리소스, 예를 들어 이미지, 스크립트, 스타일시트 등이 로드되었을 때 발생합니다. load 이벤트는 DOMContentLoaded 이벤트보다 나중에 발생합니다. 따라서, load 이벤트는 외부 리소스와 함께 실행해야 하는 작업, 예를 들어 외부 이미지를 로드하고 이를 기반으로 작업을 실행하는 것과 같은 작업에 유용합니다.

종합적으로, DOMContentLoaded 이벤트는 DOM이 로드되었을 때 작업을 실행하는 데 유용하고, load 이벤트는 문서의 외부 리소스가 로드되었을 때 실행해야 하는 작업에 유용합니다.

 

 

 


 

 

 

 

 

그렇다고 한다.

 

 

 

 


출처:

https://developer.mozilla.org/ko/docs/Web/API/Window/DOMContentLoaded_event

 

DOMContentLoaded - Web API | MDN

DOMContentLoaded 이벤트는 초기 HTML 문서를 완전히 불러오고 분석했을 때 발생합니다. 스타일 시트, 이미지, 하위 프레임의 로딩은 기다리지 않습니다.

developer.mozilla.org

 

https://developer.mozilla.org/ko/docs/Web/API/Window/load_event

 

load - Web API | MDN

load 이벤트는 리소스와 그것에 의존하는 리소스들의 로딩이 완료되면 실행됩니다.

developer.mozilla.org

 

 

 

 

728x90
저작자표시 (새창열림)

'Web > javascript' 카테고리의 다른 글

[자바스크립트] textContent와 innerText 차이  (0) 2023.05.02
[자바스크립트] 전개연산자  (0) 2023.04.25
[자바스크립트] Optional Chaining 연산자(?.)  (0) 2023.01.18
[자바스크립트] axios  (0) 2022.12.30
[자바스크립트/HTML] Img onerror  (0) 2022.12.13
R 스토리작업하거나 공부하면서 경험한 것들을 정리하는 블로그입니다.

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.