Files
2nd/10_Wiki/Topic_Programming/AI_and_ML/Interaction-to-Next-Paint-INP.md
T
Antigravity Agent 9148c358d0 docs(10_Wiki): 위키 전체 재구성 — Topic_* 폴더를 4개 카테고리로 통합 + 대규모 중복 제거
Topic_Agent/Topic_Blog/Topics/Topics_Biz/Topics_Meeting/Topics_Rag의 마크다운 지식 문서를
Topic_General/Topic_Programming/Topic_Graphic/Topic_Business 4개 카테고리로 재분류.

- 중복 제거: frontmatter의 status:duplicate/merged + duplicate_of/redirect_to 필드로
  자기 자신을 중복으로 선언한 리다이렉트 stub 1032개 제거, 완전 동일 내용 파일 472개 제거,
  동일 파일명·다른 내용 충돌 시 더 큰(완전한) 버전만 유지(162개 제거) — 총 1639개 중복 제거.
- 분류: 폴더 단위로 명확한 항목(AI_and_ML/Coding/Architecture 등 → Programming,
  Comfyui/Visual_Effects → Graphic, Topics_Biz/Topics_Meeting/사업 등 → Business,
  Poetic_Blog_Writing/창의성/Game_Design 등 → General)은 폴더 우선순위로,
  나머지 혼재 폴더(Topic_Agent/Topic_Blog/Topics 루트/Thinking & Reasoning/Other/UI_UX_Assets)는
  title/tags 키워드 스코어링으로 파일 단위 분류(불명확한 경우 General로 폴백).
  원본 폴더명은 "From_*" 서브폴더로 보존해 추적 가능성 유지.
- 최종 배치: Programming 2784 / General 1608 / Graphic 285 / Business 249 = 4926개 문서.
- 에이전트 운영 상태(.astra/.agent/.obsidian/sessions/memory/_company/docs/lessons/_shared/src)는
  지식 콘텐츠가 아니므로 재분류 대상에서 제외하고 원위치 유지.
- Topics/Topic_email(상위 보호 폴더 Topic_email과 파일명 100% 중복) 삭제 — 보호 폴더 자체는 미변경.
- 완전히 비게 된 Topic_Agent/Topic_Blog/Topics_Biz/Topics_Rag 폴더 제거.
2026-07-05 00:33:48 +09:00

3.6 KiB

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack
id title category status canonical_id aliases duplicate_of source_trust_level confidence_score verification_status tags raw_sources last_reinforced github_commit tech_stack
wiki-2026-0508-interaction-to-next-paint-inp Interaction to Next Paint (INP) 10_Wiki/Topics verified self
INP
Interaction to Next Paint
web vital
FID replacement
none A 0.95 applied
web-vitals
inp
performance
frontend
core-web-vitals
2026-05-10 pending
language framework
JavaScript / TypeScript web-vitals

Interaction to Next Paint (INP)

매 한 줄

"매 user input → 매 next visible paint 의 latency". 2024-03 의 의 의 FID 의 replace. 매 Core Web Vitals member. 매 < 200ms 'good', < 500ms 'needs improvement'.

매 핵심

매 measurement

  • 매 매 page session 의 of 의 모든 interaction 의 worst (P98).
  • 매 input delay + processing + presentation delay.

매 응용

  • SEO (Google ranking).
  • UX.
  • Form / button responsiveness.

💻 패턴

Measure

import { onINP } from 'web-vitals';
onINP(({ value, rating }) => {
  analytics.track('INP', { value, rating });  // 매 rating: 'good' | 'needs-improvement' | 'poor'
});

Optimize: yield to main thread

button.addEventListener('click', async () => {
  await scheduler.yield();  // 매 modern API
  // 매 매 chunk 의 의 의 yield
  for (let i = 0; i < items.length; i++) {
    if (i % 100 === 0) await scheduler.yield();
    process(items[i]);
  }
});

Web Worker (heavy work)

const worker = new Worker('heavy.js');
button.addEventListener('click', () => {
  worker.postMessage(data);
});
worker.onmessage = e => updateUI(e.data);

Debounce / throttle

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

input.addEventListener('input', debounce(handleSearch, 300));

React 18 useDeferredValue

function Search({ query }) {
  const deferredQuery = useDeferredValue(query);
  const results = expensiveCompute(deferredQuery);
  return <Results items={results} />;
}

Long Animation Frames API (debug)

new PerformanceObserver(list => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long task', entry);
    }
  }
}).observe({ type: 'long-animation-frame', buffered: true });

Code splitting

const HeavyComponent = lazy(() => import('./HeavyComponent'));
// 매 only loaded on demand

매 결정 기준

상황 Approach
Heavy compute Worker
Long task scheduler.yield
Search input Debounce + useDeferredValue
Initial bundle Code split

기본값: 매 measure with web-vitals + 매 yield + 매 worker for heavy + 매 < 200ms target.

🔗 Graph

🤖 LLM 활용

언제: 매 web product. 매 SEO. 언제 X: 매 backend.

안티패턴

  • Synchronous heavy work on main thread: 매 INP 폭발.
  • No measurement: 매 invisible.
  • setTimeout(0) only: 매 still on main.

🧪 검증 / 중복

  • Verified (web.dev, web-vitals.js docs).
  • 신뢰도 A.

🕓 Changelog

날짜 변경
2026-05-08 Phase 1
2026-05-10 Manual cleanup — INP + 매 yield / worker / debounce / React code