--- id: [[P-Reinforce|P-Reinforce]]-AUTO-2A8383 category: Unified confidence_score: 0.90 tags: [auto-reinforced] last_reinforced: 2026-04-20 github_commit: "[P-Reinforce] Continuous Worker - Long Animation Frames API" --- # [[Long Animation Frames API|Long Animation Frames API]] ## πŸ“Œ ν•œ 쀄 톡찰 (The Karpathy Summary) > Long Animation Frames APIλŠ” μ‚¬μš©μž μƒν˜Έμž‘μš©μ„ μ§€μ—°μ‹œν‚€λŠ” 슀크립트λ₯Ό μ‹λ³„ν•˜κ³  μ„ΈλΆ€ 정보λ₯Ό μ œκ³΅ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” μ›Ή μ„±λŠ₯ APIμž…λ‹ˆλ‹€ [1]. [[Chrome|Chrome]] λΈŒλΌμš°μ €μ—μ„œ INP(Interaction to Next Paint) μ§€ν‘œ 츑정을 μœ„ν•œ 계츑(instrumentation) 역할을 ν•˜μ—¬, νŠΉμ • μƒν˜Έμž‘μš© 쀑에 μ‹€ν–‰λœ μžλ°”μŠ€ν¬λ¦½νŠΈ λͺ©λ‘μ„ μ œκ³΅ν•©λ‹ˆλ‹€ [2]. 이λ₯Ό 톡해 κ°œλ°œμžλŠ” μ—΄μ•…ν•œ μ‚¬μš©μž κ²½ν—˜μ„ μœ λ°œν•˜λŠ” μŠ€ν¬λ¦½νŠΈμ™€ ν•¨μˆ˜λ₯Ό 효과적으둜 νƒμ§€ν•˜κ³  μ΅œμ ν™”ν•  수 μžˆμŠ΅λ‹ˆλ‹€ [2]. ## πŸ“– κ΅¬μ‘°ν™”λœ 지식 (Synthesized Content) * **μƒν˜Έμž‘μš© 처리 μ‹œκ°„ 및 슀크립트 식별:** 이 APIλŠ” μ‚¬μš©μžμ˜ μž…λ ₯(클릭, νƒ­, 포인터 λ“±)에 λŒ€ν•œ 직접적 λ˜λŠ” 간접적인 결과둜 μ‹€ν–‰λœ 이벀트 λ¦¬μŠ€λ„ˆλ‚˜ 콜백 λ“±μ˜ 슀크립트 λͺ©λ‘μ„ μ‹λ³„ν•˜κ²Œ ν•΄μ€λ‹ˆλ‹€ [2]. [[Chrome DevTools|Chrome DevTools]]μ—μ„œ INP 값을 뢄석할 λ•Œ, 이 API 덕뢄에 μƒν˜Έμž‘μš© 처리 μ‹œκ°„μ— κΈ°μ—¬ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ½”λ“œμ˜ 상세 λͺ©λ‘μ„ μ½˜μ†”μ—μ„œ 확인할 수 μžˆμŠ΅λ‹ˆλ‹€ [2]. * **μ„±λŠ₯ λͺ¨λ‹ˆν„°λ§ λ„κ΅¬μ—μ„œμ˜ ν™œμš©:** DebugBear와 같은 μ›Ή μ„±λŠ₯ λͺ¨λ‹ˆν„°λ§ μ œν’ˆμ€ Long Animation Frames APIμ—μ„œ 얻은 데이터λ₯Ό ν™œμš©ν•˜μ—¬ μ‚¬μš©μž μƒν˜Έμž‘μš©μ„ μ§€μ—°μ‹œν‚€λŠ” 슀크립트λ₯Ό μ‹œκ°ν™”ν•©λ‹ˆλ‹€ [1]. 이λ₯Ό 톡해 각 슀크립트λ₯Ό νŒŒλΉ„μ½˜, μ‹€ν–‰ μ΄μœ μ— λŒ€ν•œ μ„€λͺ…, 그리고 μŠ€ν¬λ¦½νŒ… μž‘μ—…κ³Ό λ ˆμ΄μ•„μ›ƒ μž‘μ—…μ˜ μ„ΈλΆ€ ν•­λͺ©μœΌλ‘œ λΆ„λ₯˜ν•˜μ—¬ ν‘œμ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€ [1]. * **INP(Interaction to Next Paint) 문제 ν•΄κ²°:** μ›Ή μ‚¬μ΄νŠΈμ˜ λ°˜μ‘μ„±μ„ μΈ‘μ •ν•˜λŠ” 핡심 μ§€ν‘œμΈ INP의 ν•˜μœ„ μš”μ†Œ 쀑 '처리 μ‹œκ°„([[Processing|Processing]] duration)'의 μ§€μ—° 원인을 뢄석할 λ•Œ 맀우 μ€‘μš”ν•˜κ²Œ ν™œμš©λ©λ‹ˆλ‹€ [2, 3]. ## ⚠️ λͺ¨μˆœ 및 μ—…λ°μ΄νŠΈ (Contradictions & RL Update) - **κ³Όκ±° λ°μ΄ν„°μ™€μ˜ 좩돌:** μžλ™ν™” 엔진에 μ˜ν•΄ λ§€ν•‘λœ μ§€μ‹μœΌλ‘œ, μΆ”ν›„ μ •λ°€ 검증 ν•„μš”. - **μ •μ±… λ³€ν™”:** AI λΆ„μ•Όμ˜ μžλ™ μžμ‚°ν™” μˆ˜ν–‰. ## πŸ”— 지식 μ—°κ²° (Graph) - **Related Topics:** INP (Interaction to Next Paint), [[Chrome DevTools|Chrome DevTools]], Web Performance - **Projects/Contexts:** μ‚¬μš©μž μƒν˜Έμž‘μš© 병λͺ© ν˜„μƒμ„ νŒŒμ•…ν•˜κΈ° μœ„ν•œ [[Chrome DevTools|Chrome DevTools]] μ„±λŠ₯ νŒ¨λ„ 및 DebugBear μ›Ή μ„±λŠ₯ λͺ¨λ‹ˆν„°λ§ λŒ€μ‹œλ³΄λ“œ - **Contradictions/Notes:** μ†ŒμŠ€μ— λͺ¨μˆœλ˜λŠ” λ‚΄μš©μ€ μ‘΄μž¬ν•˜μ§€ μ•ŠμœΌλ©°, 이 APIλŠ” μ›Ή μ„±λŠ₯ 뢄석 및 μ„œλ“œνŒŒν‹° λͺ¨λ‹ˆν„°λ§ μ„œλΉ„μŠ€μ—μ„œ μžλ°”μŠ€ν¬λ¦½νŠΈ μ‹€ν–‰ 지연을 μ‹λ³„ν•˜λŠ” μ£Όμš” μˆ˜λ‹¨μœΌλ‘œ μΌκ΄€λ˜κ²Œ μ„€λͺ…λ˜κ³  μžˆμŠ΅λ‹ˆλ‹€. --- *Last updated: 2026-04-19* ---