Loading Sequence

Critical CSS → LCP 이미지 → 1P JS → BTF 이미지처럼 자원을 우선순위 순서로 실행하는 PriorityScheduler를 구현하세요.

API

export interface Task {
  id: string;
  priority: 1 | 2 | 3; // 1이 가장 높음
  run: () => void;
}

export class PriorityScheduler {
  enqueue(task: Task): void;
  flush(): void;             // 우선순위 순서대로 모든 task 실행 + 큐 비움
  getLog(): string[];        // 실행된 task id들의 순서 기록
}

동작

• enqueue(task): 큐에 task를 추가합니다. 같은 priority가 여러 개라면 **enqueue 순서(FIFO)**를 유지해야 합니다.
• flush(): priority 오름차순(1 → 2 → 3)으로 모든 task의 run()을 호출합니다. 동일 priority 내에서는 enqueue 순서대로 실행합니다. 모든 task 실행 후 내부 큐를 비웁니다.
• 각 task의 run()은 자신의 id를 공유 로그에 push 해야 합니다(테스트는 이 로그를 검사합니다). getLog()는 누적 로그를 반환합니다.
• flush()는 여러 번 호출 가능합니다(이후 enqueue된 task만 처리). 로그는 누적됩니다.

예시

const s = new PriorityScheduler();
s.enqueue({ id: 'btf-img',  priority: 3, run: () => s['log'].push('btf-img') });
s.enqueue({ id: 'css',      priority: 1, run: () => s['log'].push('css') });
s.enqueue({ id: '1p-js',    priority: 2, run: () => s['log'].push('1p-js') });
s.enqueue({ id: 'lcp-img',  priority: 1, run: () => s['log'].push('lcp-img') });
s.flush();
s.getLog(); // ['css', 'lcp-img', '1p-js', 'btf-img']

학습 포인트

• FCP 자원이 LCP 자원보다 먼저, LCP 자원이 FID 자원보다 먼저 — 우선순위와 순서가 핵심
• 안정 정렬(stable sort)의 중요성: 동일 우선순위 내 enqueue 순서 보존