Chrome INP 폭증? Long Task를 50ms로 쪼개는 법

// Long Task 관측 (브라우저 지원 범위 확인 필요)
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    // entry.duration: ms
    // entry.attribution: 원인 스크립트 힌트(브라우저/정책에 따라 제한)
    console.log('[LongTask]', {
      duration: entry.duration,
      startTime: entry.startTime,
      name: entry.name,
      attribution: entry.attribution,
    });
  }
});

observer.observe({ entryTypes: ['longtask'] });

button.addEventListener('click', () => {
  // 1) 즉시 반응(로딩 표시 등)
  setLoading(true);

  // 2) 다음 프레임으로 무거운 작업 이관
  requestAnimationFrame(() => {
    heavyWork();
    setLoading(false);
  });
});

async function runInChunks(items, chunkSize = 200) {
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);

    // chunk 처리
    processChunk(chunk);

    // 브라우저에 제어권 반환
    if (globalThis.scheduler?.postTask) {
      await scheduler.postTask(() => {}, { priority: 'background' });
    } else {
      await new Promise((r) => setTimeout(r, 0));
    }
  }
}

function runWhenIdle(task) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback((deadline) => {
      // deadline.timeRemaining() 안에서만 조금씩 처리
      while (deadline.timeRemaining() > 5) {
        const done = task();
        if (done) break;
      }

      // 아직 남았으면 다시 예약
      if (!task.done) runWhenIdle(task);
    });
  } else {
    setTimeout(() => task(), 0);
  }
}

self.onmessage = (e) => {
  const { items } = e.data;
  // 무거운 계산
  const result = items
    .map((x) => ({ ...x, score: calcScore(x) }))
    .sort((a, b) => b.score - a.score);

  self.postMessage({ result });
};

function calcScore(x) {
  // 예시용 더미 연산
  let s = 0;
  for (let i = 0; i < 5000; i++) s += (x.value * i) % 97;
  return s;
}

const worker = new Worker(new URL('./worker.js', import.meta.url), {
  type: 'module',
});

function computeInWorker(items) {
  return new Promise((resolve) => {
    worker.onmessage = (e) => resolve(e.data.result);
    worker.postMessage({ items });
  });
}

function updateCards(cards) {
  // 1) 읽기: 레이아웃/스타일 값 수집
  const rects = cards.map((el) => el.getBoundingClientRect());

  // 2) 쓰기: DOM 변경은 한 번에
  requestAnimationFrame(() => {
    cards.forEach((el, idx) => {
      const r = rects[idx];
      el.style.transform = `translateY(${Math.round(r.top)}px)`;
    });
  });
}

import { startTransition, useState } from 'react';

function Search() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  function onChange(e) {
    const q = e.target.value;
    setQuery(q); // 입력 반영은 즉시

    startTransition(() => {
      // 결과 갱신은 덜 급하게
      setResults(expensiveSearch(q));
    });
  }

  return (
    // JSX는 코드 블록 내부라 부등호 문제 없음
    <div>
      <input value={query} onChange={onChange} />
      <ResultList items={results} />
    </div>
  );
}

button.addEventListener('click', () => {
  setStatus('processing');

  // 예: 큰 배열을 한 번에 정렬/가공
  const items = getItems();
  const processed = items
    .map((x) => heavyTransform(x))
    .sort((a, b) => b.score - a.score);

  render(processed);
  setStatus('done');
});

function heavyTransform(x) {
  let acc = 0;
  for (let i = 0; i < 20000; i++) acc += (x.value * i) % 101;
  return { ...x, score: acc };
}

button.addEventListener('click', async () => {
  setStatus('processing');

  // 입력 직후 페인트를 먼저 확보
  await new Promise((r) => requestAnimationFrame(r));

  const items = getItems();
  const out = [];

  const chunkSize = 50;
  for (let i = 0; i < items.length; i += chunkSize) {
    const chunk = items.slice(i, i + chunkSize);

    for (const x of chunk) out.push(heavyTransform(x));

    // 50ms를 넘기지 않도록 브라우저에 제어권 반환
    if (globalThis.scheduler?.postTask) {
      await scheduler.postTask(() => {}, { priority: 'user-visible' });
    } else {
      await new Promise((r) => setTimeout(r, 0));
    }
  }

  out.sort((a, b) => b.score - a.score);
  render(out);
  setStatus('done');
});