반응형
자바스크립트 로드 방식
- 성능과 안정성을 동시에 잡으려면 defer가 기본 선택
- 실행 순서가 중요하면 async는 피함
- 모듈 기반 프로젝트는 type="module"이 사실상 표준
기본 로드 방식
<script src="app.js"></script>동작 방식
- HTML 파싱 중 <script> 태그를 만나면
- HTML 파싱 중단
- JS 파일 다운로드
- JS 실행
- HTML 파싱 재개
특징
- HTML 파싱과 JS 다운로드/실행이 동기적
- 렌더링 차단 발생
- DOM 접근은 보장됨 (위치에 따라)
단점
- 초기 렌더링 지연 (JS가 크면 화면이 아예 안 뜬 채로 대기)
- 대형 스크립트일수록 성능 저하
언제 DOM 접근이 가능할까?
- <script>가 DOM 아래에 있으면 가능
- 위에 있으면 document.querySelector가 실패할 수 있음
사용 시점
- 거의 사용하지 않음
- 반드시 즉시 실행되어야 하는 스크립트일 때만 제한적으로 사용
<script defer> (지연 실행)
- “HTML 먼저 끝까지 읽고, JS는 나중에 순서대로 실행”
<script src="app.js" defer></script>동작 방식
- HTML 파싱과 함께 JS를 병렬로 다운로드
- HTML 파싱 완료 후
- DOMContentLoaded 이전에 실행
- 여러 개일 경우 작성 순서대로 실행
특징
- HTML 파싱을 차단하지 않음
- DOM이 완전히 생성된 후 실행됨
- 여러 개 있어도 실행순서 보장
장점
- 렌더링 성능 우수
- DOM 조작 코드에 안전
실무 권장 패턴
- 가장 권장되는 방식 (일반 UI/서비스 로직)
<script async> (비동기 실행)
- 다른 코드와 전혀 관계없는 JS에 적합
<script src="app.js" async></script>동작 방식
- HTML 파싱과 함께 JS를 병렬로 다운로드
- 다운로드 완료 즉시 실행
- 실행 시점에 HTML 파싱 일시 중단
- 실행 순서 보장되지 않음
특징
- 실행 시점이 HTML 진행 상황에 따라 달라짐
- DOM이 완성되었는지 보장 안 됨
- 여러 개면 순서 랜덤
사용 적합 사례
- 독립적인 스크립트
- 광고
- 트래킹 코드
- analytics
✓ “JS 준비되면 바로 실행, 타이밍은 랜덤”
<script> 위치를 </body> 직전에 두는 방식
- HTML 다 읽고 나서 JS 실행
<body>
...
<script src="app.js"></script>
</body>동작 방식
- HTML이 거의 다 파싱 된 후 스크립트 실행
특징
- DOM 접근 가능
- 별도 속성 없이도 렌더링 차단 최소화
한계
- 스크립트 다운로드는 여전히 늦음
- defer보다 성능 제어력이 떨어짐 (defer 사용 권장)
type="module" 방식
- 모던 자바스크립트 전용 defer
<script type="module" src="app.js"></script>특징
- 기본적으로 defer처럼 동작
- strict mode 자동 적용
- 모듈 스코프 사용 (파일 간 변수 충돌 없음)
- import / export 가능
주의사항
- 구형 브라우저 호환성 고려 필요
- 모듈은 CORS 규칙 적용
실무 권장 패턴
- 모던 프론트엔드
방식별 비교 요약
| 방식 | HTML 파싱 | 차단실행 | 시점실행 순서 보장 | DOM 접근 |
| 기본 script | O | 즉시 | O | 위치 의존 |
| defer | X | 파싱 후 | O | O |
| async | X | 다운로드 즉시 | X | X |
| body 하단 | 거의 X | 파싱 후 | O | O |
| module | X | 파싱 후 | O | O |
[javascript] DOM, 파싱, 노드
DOM(Document Object Model) 웹 페이지의 HTML을 트리 구조로 표현한 자바스크립트 객체 웹 페이지의 구조(HTML)를 자바스크립트에서 객체(트리 구조) 형태로 표현한 모델HTML, CSS로 웹사이트를 만들 때 자
u-pub.tistory.com
반응형
'JS > Javascript' 카테고리의 다른 글
| [javascript] 배열 7/ 배열 축약, 누적 (reduce, reduceRight) (0) | 2025.09.30 |
|---|---|
| [javascript] 배열 6-2 / 배열 정렬(reverse) (0) | 2025.09.30 |
| [javascript] 배열 6-1 / 배열 정렬(sort, localCompare) (0) | 2025.09.30 |
| [javascript] 배열 5-1 / 배열 변환 (map, filter, flatMap) (0) | 2025.09.30 |
| [javascript] 배열 5 / 배열 탐색, 조건 검색, 검증 (indexOf(), lastIndexOf(), includes(), find(), findIndex(), every(), some()..) (0) | 2025.09.11 |