Antigravity Agent
30 lines
4.1 KiB
Markdown
30 lines
4.1 KiB
Markdown
# [[JavaScript Optimization]]
|
|
|
|
## 📌 Brief Summary
|
|
JavaScript Optimization(자바스크립트 최적화)은 웹사이트의 로딩 속도, 상호작용성, 그리고 전반적인 사용자 경험을 향상시키기 위해 자바스크립트 코드의 용량을 줄이고 실행 효율을 극대화하는 웹 성능 개선 기법입니다. 불필요한 코드 제거, 코드 분할, 실행 지연, 메인 스레드 차단 방지 등의 전략을 활용하여 브라우저의 렌더링 부하를 줄이고 Core Web Vitals의 핵심 지표인 INP(Interaction to Next Paint)를 향상시키는 데 목적이 있습니다 [1-3].
|
|
|
|
## 📖 Core Content
|
|
* **로딩 및 파싱 최적화 방안:**
|
|
* **코드 축소 및 제거:** 자바스크립트 파일에서 불필요한 문자를 제거하는 Minify(축소) 작업을 통해 전체 파일 크기를 최소화해야 합니다 [4]. 또한 사용하지 않는 코드를 제거하는 트리 쉐이킹(Tree shaking) 및 데드 코드 제거 기법을 적용합니다 [5, 6].
|
|
* **비동기 로딩 및 지연 로딩:** 렌더링을 차단하는 중요하지 않은 자바스크립트 자원은 `async` 또는 `defer` 속성을 적절히 사용하여 로딩을 지연시킴으로써 메인 콘텐츠가 최대한 빨리 렌더링되도록 합니다 [4, 7].
|
|
* **코드 분할(Code Splitting):** 거대한 모놀리식 자바스크립트 번들을 라우트나 컴포넌트 단위로 잘게 쪼개어(Chunking), 초기 페이지 로드에 필요한 코드만 먼저 불러오고 나머지는 지연 로딩(Lazy Loading)하는 방식이 필수적입니다 [3, 8-11].
|
|
|
|
* **실행 시간 및 메인 스레드 최적화 (INP 개선):**
|
|
* **긴 작업 쪼개기(Breaking up long tasks):** 50ms 이상 걸리는 무거운 동기적 처리 작업은 메인 스레드를 차단하여 상호작용성을 떨어뜨립니다. 이를 50ms 미만의 작은 청크로 쪼개어 브라우저가 중간에 사용자 입력이나 UI 업데이트를 처리할 수 있도록 양보(Yield)해야 합니다 [1, 12, 13].
|
|
* **웹 워커(Web Workers) 활용:** 복잡한 계산이나 CPU 집약적인 작업은 웹 워커를 사용하여 메인 스레드에서 백그라운드 스레드로 오프로드(Offload)하여 메인 스레드의 응답성을 유지합니다 [1, 14, 15].
|
|
* **유휴 시간 활용:** 중요도가 낮은 작업은 `requestIdleCallback`을 사용하여 브라우저가 유휴 상태일 때 실행되도록 예약합니다 [16, 17].
|
|
|
|
* **이벤트 및 DOM 렌더링 최적화:**
|
|
* **이벤트 핸들러 최적화:** 스크롤이나 검색 등 빈번하게 발생하는 이벤트 핸들러에는 디바운스(Debounce)와 스로틀(Throttle) 기법을 적용하여 불필요한 반복 실행을 제한합니다 [1, 18, 19].
|
|
* **DOM 조작 최소화:** 잦은 레이아웃 재계산을 유발하는 무거운 애니메이션과 과도한 DOM 조작을 줄이고, 가상 렌더링(Virtual rendering)이나 일괄 업데이트(Batch updates) 같은 효율적인 코딩 기술을 적용합니다 [1, 14, 20].
|
|
|
|
* **서드파티 스크립트 관리:**
|
|
* 분석, 광고, 챗봇 등 타사 스크립트는 INP 저하의 주요 원인이 될 수 있습니다 [21]. 이러한 스크립트는 페이지 로드 이후로 로딩을 지연시키거나, 사용자가 실제 상호작용할 때 조건부로 로드되도록 구성해야 합니다 [6-8]. Chrome DevTools의 Coverage 탭 등을 사용하여 사용되지 않는 스크립트의 비중을 식별하고 관리할 수 있습니다 [22].
|
|
|
|
## 🔗 Knowledge Connections
|
|
- **Related Topics:** [[Core Web Vitals]], [[Interaction to Next Paint (INP)]], [[Code Splitting]], [[Lazy Loading]]
|
|
- **Projects/Contexts:** [[Web Performance Optimization]], [[Frontend Performance Checklist]]
|
|
- **Contradictions/Notes:** 소스 전반에서 자바스크립트 최적화는 현대 웹사이트 아키텍처의 필수 요소로 간주되며, 특히 2025년 Google Core Web Vitals의 지표가 FID에서 INP로 변경되면서 자바스크립트 메인 스레드 차단을 해결하기 위한 작업(Web Workers, 작업 분할 등)의 중요성이 공통적으로 강조되고 있습니다 [1, 2, 23, 24].
|
|
|
|
---
|
|
*Last updated: 2026-04-26* |