JavaScript - 문서의 로드 시점 DOMContentLoaded / Load / jQuery

DW J·2022년 8월 8일
0

develop_wis

목록 보기
2/9

JavaScript의 문서 로드 시점

  1. 웹브라우저 시작 (사용자가 페이지를 방문)
  2. 웹문서 읽기 (브라우저가 웹문서를 읽기 시작)
  3. DOM 생성 (DOM이 생성되면 DOMContentLoaded 메서드 실행)

1. DOMContentLoaded

  • HTML과 script가 로드 된 시점에 이벤트 발생
  • onLoad 이벤트 보다 먼저 실행
  • 빠른 실행 속도가 필요할 때 적합
  • IE8 이하의 브라우저 지원하지 않음 (상관X)

코드예시

window.addEventListener('DOMContentLoaded', (e) => {
	...실행 될 코드
})

2. onload (load)

  • 문서의 모든 리소스(images, js, css, etc)가 로드 된 후 이벤트
  • 문서의 포함된 모든 컨텐츠가 로드된 후 실행되기때문에 불필요한 로딩시간이 발생됨
  • 동일한 문서에 onload는 하나만 존재 해야 한다
    중복 된 경우 가장 마지막 선언이 실행
    외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요
  • 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당
  • window객체 뿐만 아니라 원하는 DOM객체가 로드됐을 때 코드설정 가능

코드예시

window.onload = () => {
	...실행 될 코드
}

이렇게 선언 되면 해당 위(window)코드는 무시 됨 - 한 문서에 하나의 onload만 존재 가능
>> <body onload="실행 될 코드">

원하는 DOM객체에도 설정이 가능함
>> document.querySelector(".element").onload = () => {}

3. jQuery ready/load

  • jQuey의 ready는 DOMContentLoaded와 동일
  • load는 load와 동일
  • ready의 경우 여러번 사용되면 선언 순서에 따라 순차적으로 실행됨

코드예시

jQuery ready
>> $(window).ready(() => {})

jQuery load
>> $(window).load(() => {})
profile
잘하는것보다 꾸준히하는게 더 중요하다

0개의 댓글