문서 로드 시점

😄 종류

• load

• beforeunload

• unload

• DOMcontentLoaded

😄 load

window.addEventListener('load', () => { console.log('load'); }

• HTML을 전부 parsing하고 DOM요소로 변환한 이후에 img, CSS등 외부 파일도 불러오는게 끝나면 발생한다

• HTML 요소에 속성으로 지정시 (ex - bdoy onload = '') window.onload로 지정된 것은 무시된다

• window.onload는 최종적으로 지정한 함수만 적용되기때문에 주의해서 사용해야한다 (이전에 사용한 함수는 덮어씌워진다)

• defer와 비슷하지만 defer는 HTML 문서만 다 로드되고 실행되고 load는 HTML 문서 + 관련된 이미지나 리소스도 전부 다운로드 되야 실행된다

🥰defer에 대한 자세한 설명은 제 벨로그에 있습니다🥰

😄 beforeunload

window.addEventListener('beforeunload', () => { console.log('beforeunload'); }

• 사용자가 페이지 나가기 직전에 호출되는 event

• ex) 페이지를 정말 나가시겠습니까?

😄 unload

window.addEventListener('unload', () => { console.log('unload'); }

• 사용자가 최종적으로 페이지를 떠나면 호출되는 event

• 모든 것들이 unload 되었을 때 호출된다

• 일반적으로 필요 없는 쿠키나 캐쉬 지울 때 사용한다

😄 DOMcontentLoaded

window.addEventListener('DOMcontentLoaded', () => {})

• 브라우저가 HTML을 전부 parsing하고 DOM Tree 완성하는 즉시 발생한다

• load와는 다르게 img, CSS 파일 등 외부 파일은 기다리지 않는다

• script에 async 속성이 있다면 async는 HTML 파일을 전부 parsing 하기 전에 script 파일이 다운로드가 완료되면 script 파일을 먼저 실행하기 때문에 전체적인 실행 순서가 달라질수도 있다

• 일반적인 호출 순서는 defer -> DOMcontentLoaded -> load 순으로 빠르다

🥰async에 대한 자세한 설명은 제 벨로그에 있습니다🥰

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍