5.1 KiB
5.1 KiB
id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, inferred_by, tech_stack
| id | title | category | status | canonical_id | aliases | duplicate_of | source_trust_level | confidence_score | tags | raw_sources | last_reinforced | github_commit | inferred_by | tech_stack | ||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| wiki-2026-0508-long-tasks | Long Tasks | 10_Wiki/Topics | needs_review | self |
|
none | A | 0.9 |
|
2026-04-20 | [P-Reinforce] Continuous Worker - Long Tasks | Claude Opus 4.7 (auto-normalize 2026-05-08) |
|
Long Tasks
📌 한 줄 통찰 (The Karpathy Summary)
롱 태스크(Long Tasks)는 브라우저의 메인 스레드를 50ms 이상 장시간 차단하는 자바스크립트 연산 등의 CPU 처리 작업을 의미합니다 [1]. 이러한 작업은 짧은 여러 개의 작업보다 사용자 상호작용(Interaction)을 훨씬 더 지연시키며, 웹사이트를 느리게 느껴지게 만드는 주된 원인이 됩니다 [2].
📖 구조화된 지식 (Synthesized Content)
- 정의 및 성능에 미치는 영향: 롱 태스크는 브라우저의 메인 스레드를 50밀리초(ms) 이상 차단하는 자바스크립트 연산을 말합니다 [1]. 브라우저의 CPU 처리 작업 중 롱 태스크는 사용자 상호작용을 처리하는 것을 방해하여 응답성을 지연시킵니다 [2]. 이는 사용자 경험을 저하시키며, 구글의 Core Web Vitals 지표 중 하나인 INP(Interaction to Next Paint) 점수를 악화시키는 주요 원인이 됩니다 [1, 3].
- 식별 및 모니터링 방법: 개발자는 Chrome DevTools의 Performance(성능) 패널을 통해 롱 태스크를 발견할 수 있습니다. 성능 프로파일링 시 긴 시간이 소요된 Task에는 빨간색 삼각형 경고가 표시되어 성능 병목 현상이 발생했음을 알립니다 [4, 5]. 또한 Long Animation Frames API를 활용하여 사용자 상호작용을 지연시키는 특정 스크립트를 식별하고 분석할 수도 있습니다 [6, 7].
- 최적화 및 해결 전략:
상호작용 응답성을 개선하려면 롱 태스크를 쪼개어 브라우저가 렌더링 및 입력을 처리할 시간을 확보해야 합니다 [1]. 제공된 소스에서 권장하는 해결 방법은 다음과 같습니다.
- 작업 분할(Task Splitting): 무거운 자바스크립트 함수를 더 작은 비동기 청크(async chunks)로 나눕니다 [1].
- Scheduler API 사용:
scheduler.yield()와 같은 메서드를 사용하여 작업 중간에 브라우저 스케줄러로 제어권을 넘겨(yield) 사용자 상호작용을 먼저 처리하게 한 뒤 남은 작업을 계속 진행합니다 [2]. - 메인 스레드 오프로딩: Web Workers를 활용하여 무거운 로직을 메인 스레드에서 분리하여 실행합니다 [1, 8].
- 스케줄링 및 지연 로딩:
requestIdleCallback을 사용하여 중요도가 낮은 작업의 실행을 미루거나, 중요하지 않은 자바스크립트의 로딩을 지연(defer) 및 지연 로딩(lazy load) 처리합니다 [1, 9].
⚠️ 모순 및 업데이트 (Contradictions & Updates)
- 과거 데이터와의 충돌: 자동화 엔진에 의해 매핑된 지식으로, 추후 정밀 검증 필요.
- 정책 변화: AI 분야의 자동 자산화 수행.
🔗 지식 연결 (Graph)
- Related Topics: Interaction to Next Paint (INP), Main Thread, Scheduler API, Chrome DevTools
- Projects/Contexts: Core Web Vitals, Web Performance Optimization
- Contradictions/Notes: 소스 간의 모순된 내용은 발견되지 않았으며, 제공된 자료들은 공통적으로 웹 성능 향상을 위해 롱 태스크를 식별하고 분할하는 것의 중요성을 강조하고 있습니다.
Last updated: 2026-04-19
🤖 LLM 활용 힌트 (How to Use This Knowledge)
언제 이 지식을 쓰는가:
- (TODO)
언제 쓰면 안 되는가:
- (TODO)
🧪 검증 상태 (Validation)
- 정보 상태: needs_review
- 출처 신뢰도: A
- 검토 이유: (P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)
🧬 중복 검사 (Duplicate Check)
- 기존 유사 문서: (TODO: 인덱서 클러스터 리포트 참조)
- 처리 방식: UPDATE (자동 정규화)
- 처리 이유: Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
🕓 변경 이력 (Changelog)
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|---|---|---|---|
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
💻 코드 패턴 (Code Patterns)
패턴 1: (TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)
# TODO
🤔 의사결정 기준 (Decision Criteria)
선택 A를 써야 할 때:
- (TODO)
선택 B를 써야 할 때:
- (TODO)
기본값:
(TODO)
❌ 안티패턴 (Anti-Patterns)
- [안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)