[G1-Sync] Manual knowledge update
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: P-REINFORCE-AUTO-183DC1
|
||||
id: [[P-Reinforce]]-AUTO-183DC1
|
||||
category: "10_Wiki/💡 Topics/AI"
|
||||
confidence_score: 0.90
|
||||
tags: [auto-reinforced]
|
||||
@@ -14,13 +14,13 @@ github_commit: "[P-Reinforce] Continuous Worker - Long Tasks"
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
- **정의 및 성능에 미치는 영향:**
|
||||
롱 태스크는 브라우저의 메인 스레드를 50밀리초(ms) 이상 차단하는 자바스크립트 연산을 말합니다 [1]. 브라우저의 CPU 처리 작업 중 롱 태스크는 사용자 상호작용을 처리하는 것을 방해하여 응답성을 지연시킵니다 [2]. 이는 사용자 경험을 저하시키며, 구글의 Core Web Vitals 지표 중 하나인 INP(Interaction to Next Paint) 점수를 악화시키는 주요 원인이 됩니다 [1, 3].
|
||||
롱 태스크는 브라우저의 메인 스레드를 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].
|
||||
개발자는 [[Chrome DevTools]]의 Performance(성능) 패널을 통해 롱 태스크를 발견할 수 있습니다. 성능 프로파일링 시 긴 시간이 소요된 Task에는 빨간색 삼각형 경고가 표시되어 성능 병목 현상이 발생했음을 알립니다 [4, 5]. 또한 [[Long Animation Frames API]]를 활용하여 사용자 상호작용을 지연시키는 특정 스크립트를 식별하고 분석할 수도 있습니다 [6, 7].
|
||||
- **최적화 및 해결 전략:**
|
||||
상호작용 응답성을 개선하려면 롱 태스크를 쪼개어 브라우저가 렌더링 및 입력을 처리할 시간을 확보해야 합니다 [1]. 제공된 소스에서 권장하는 해결 방법은 다음과 같습니다.
|
||||
- **작업 분할(Task Splitting):** 무거운 자바스크립트 함수를 더 작은 비동기 청크(async chunks)로 나눕니다 [1].
|
||||
- **Scheduler API 사용:** `scheduler.yield()`와 같은 메서드를 사용하여 작업 중간에 브라우저 스케줄러로 제어권을 넘겨(yield) 사용자 상호작용을 먼저 처리하게 한 뒤 남은 작업을 계속 진행합니다 [2].
|
||||
- **[[Scheduler API]] 사용:** `scheduler.yield()`와 같은 메서드를 사용하여 작업 중간에 브라우저 스케줄러로 제어권을 넘겨(yield) 사용자 상호작용을 먼저 처리하게 한 뒤 남은 작업을 계속 진행합니다 [2].
|
||||
- **메인 스레드 오프로딩:** Web Workers를 활용하여 무거운 로직을 메인 스레드에서 분리하여 실행합니다 [1, 8].
|
||||
- **스케줄링 및 지연 로딩:** `requestIdleCallback`을 사용하여 중요도가 낮은 작업의 실행을 미루거나, 중요하지 않은 자바스크립트의 로딩을 지연(defer) 및 지연 로딩(lazy load) 처리합니다 [1, 9].
|
||||
|
||||
|
||||
Reference in New Issue
Block a user