Skip to main content

JavaScript 실행과 파싱 분석

작성일 : 2025.01.09

1. JavaScript 실행과 파싱​

1.1 기본 동작​

<!-- 일반적인 스크립트 로딩 -->
<script src="example.js"></script>
  • HTML 파싱 중단
  • 스크립트 다운로드 및 실행 완료까지 대기
  • 실행 완료 후 파싱 재개
  • DOM 조작 가능성으로 인한 위험 존재

1.2 async 속성​

<!-- 비동기 로딩 및 실행 -->
<script async src="analytics.js"></script>

특징:

  • HTML 파싱과 병렬로 스크립트 다운로드
  • 다운로드 완료 즉시 실행 (파싱 중단)
  • 실행 순서 보장되지 않음
  • 독립적인 스크립트에 적합 (예: 광고, 분석 도구)

사용 케이스:

  • Google Analytics
  • 광고 스크립트
  • 독립적인 위젯
  • 다른 스크립트에 의존성이 없는 기능

1.3 defer 속성​

<!-- 지연 로딩 및 실행 -->
<script defer src="main.js"></script>

특징:

  • HTML 파싱과 병렬로 스크립트 다운로드
  • HTML 파싱 완료 후 실행
  • 선언 순서대로 실행
  • DOMContentLoaded 이벤트 전에 실행 보장

사용 케이스:

  • 메인 애플리케이션 로직
  • DOM 조작이 필요한 스크립트
  • 순서가 중요한 의존성 있는 스크립트
  • 초기 페이지 로드에 필요하지 않은 기능

1.4 모듈 스크립트​

<!-- ES 모듈 사용 -->
<script type="module" src="app.js"></script>

특징:

  • 기본적으로 defer처럼 동작
  • strict mode 적용
  • 한 번만 실행됨
  • 별도의 스코프를 가짐

2. 최적화 전략​

2.1 스크립트 최적화​

  • 중요 스크립트는 defer 사용
  • 독립적인 스크립트는 async 사용
  • 스크립트를 <body> 끝에 배치
  • 코드 스플리팅 및 레이지 로딩 적용

2.2 렌더링 성능 최적화​

  • CSS는 <head>에 배치
  • 불필요한 리플로우/리페인트 최소화
  • CSS 애니메이션은 transform/opacity 사용
  • 레이어 최적화 (will-change 속성 활용)
  • 중요 렌더링 경로(Critical Rendering Path) 최적화

2.3 리소스 최적화​

  • 이미지 최적화 (WebP, 적절한 크기)
  • CSS/JS 파일 압축
  • HTTP 캐싱 활용
  • 프리로드/프리페치 힌트 사용
<link rel="preload" href="critical.js" as="script">
<link rel="prefetch" href="non-critical.js">