스크립트 로딩 속성, DOMContentLoaded, loaded

스크립트 로딩 속성이란🤔

script태그에서 자바스크립트 파일이
브라우저에 의해 로드되고 실행되는 시점과 방식을 제어하는 역할

 

*html 자체 기능임!

속성	예시	설명	로드 방식	실행 시점	실행 순서	주 사용 목적
없음	<script src="example.js></script>	HTML 파싱 중단 후 로드 및 실행	순차 로드 (HTML 파싱 중단)	로드 완료 즉시	HTML 선언 순서대로	단순 스크립트, HTML 상단에 배치되는 경우 주로 사용
defer	<script src="example.js" defer></script>	HTML 파싱과 병렬로 로드, HTML 파싱 완료 후 실행	병렬 로드	HTML 파싱 완료 후	HTML 선언 순서대로	DOM 조작이 필요한 스크립트
async	<script src="example.js" async></script>	HTML 파싱과 병렬로 로드, 로드 완료 후 즉시 실행	병렬 로드	로드 완료 즉시	순서 보장 안됨	광고, 트래킹 등 순서에 영향 없는 스크립트
module	<script type="module" src="example.js"></script>	defer와 유사, 모듈 방식으로 로드되며 import, export 사용 가능	병렬 로드	HTML 파싱 완료 후	모듈 의존성에 따라	모듈 시스템 기반의 모듈화된 코드

 

여기서 module이랑 defer이랑 비슷해 보임! 그래서 튜터님께 여쭤보니

module이 나오기 전에 html파싱후에 스크립트를 병렬적으로 실행시키고 싶을때 defer로 사용했으나,

module이 나온후로는 module로 사용

추가로 module은 export , import , strict mode가 가능! 

---

그리고 자바스크립트 이벤트 종류에 DOMContentLoaded, loaded가 있는데 비슷해보여서 마찬가지로 여쭤보니

이건 defer이 나오기 전에 쓰였다함🤣🤣🤣

이벤트	예시	설명	트리거 시점	로드 대상	사용 목적
DOMContentLoaded	document.addEventListener('DOMContentLoaded', function() {실행내용});	DOM 트리가 완성되었을 때 발생하며, 외부 리소스(이미지, 스타일시트 등)는 아직 로드되지 않았을 수 있음	HTML 문서 파싱 완료 후	DOM	DOM 조작이 필요한 코드 실행에 적합
load	window.addEventListener('load', function() {실행내용});	HTML, 이미지, 스타일시트 등 모든 리소스가 완전히 로드된 후 발생	모든 리소스 로드 완료 후	전체 페이지	페이지의 모든 요소 로딩 완료 후 실행이 필요할 때

---

💫반전💫

리액트에서는 module파일로 자동 포맷 돼서 위에것들 안써도 됨ㅋ_ㅋ