Long Animation Frames API (LoAF, 발음: Lo-Af)는 느린 사용자 인터페이스 (UI) 업데이트를 더 잘 이해할 수 있도록 Long Tasks API를 업데이트한 것입니다. 이는 응답성을 측정하는 다음 페인트에 대한 상호작용 (INP) 코어 웹 바이탈 측정항목에 영향을 줄 수 있는 느린 애니메이션 프레임을 식별하거나 부드러움에 영향을 미치는 다른 UI 버벅거림을 식별하는 데 유용할 수 있습니다.
API 상태
Chrome 116~Chrome 122의 오리진 트라이얼에 이어 LoAF API는 Chrome 123부터 출시되었습니다.
백그라운드: Long Tasks API
Long Animation Frames API는 Chrome 58부터 Chrome에서 사용할 수 있었던 Long Tasks API의 대안입니다. 이름에서 알 수 있듯이 Long Task API를 사용하면 기본 스레드를 50밀리초 이상 차지하는 작업인 긴 작업을 모니터링할 수 있습니다. 긴 작업은 PeformanceObserver를 사용하여 PerformanceLongTaskTiming 인터페이스를 통해 모니터링할 수 있습니다.
const observer = new PerformanceObserver((list) => {
console.log(list.getEntries());
});
observer.observe({ type: 'longtask', buffered: true });
긴 태스크는 응답성 문제를 일으킬 수 있습니다. 사용자가 페이지와 상호작용하려고 해도(예: 버튼을 클릭하거나 메뉴를 여는 경우) 기본 스레드에서 이미 긴 작업을 처리하고 있다면 해당 작업이 완료될 때까지 사용자의 상호작용이 지연됩니다.
응답성을 개선하려면 긴 작업을 분할하는 것이 좋습니다. 대신 각 긴 작업을 여러 개의 작은 작업으로 나누면 상호작용에 대한 응답이 크게 지연되지 않도록 그 사이에서 더 중요한 작업을 실행할 수 있습니다.
따라서 응답성을 개선하려고 할 때 첫 번째 단계는 성능 추적을 실행하고 긴 작업을 살펴보는 것입니다. Lighthouse (긴 기본 스레드 작업 방지 감사 포함)와 같은 실험실 기반 감사 도구를 사용하거나 Chrome DevTools에서 긴 작업을 살펴보는 방법이 있습니다.
실험실 기반 테스트는 상호작용이 포함되지 않을 수 있으므로 응답성 문제를 파악하기에는 적절하지 않은 시작점일 수 있습니다. 상호작용이 포함되는 경우에도 발생할 수 있는 상호작용의 일부만 포함됩니다. 현장에서 느린 상호작용의 원인을 측정하는 것이 좋습니다.
Long Tasks API의 단점
Performance Observer를 사용하여 필드에서 긴 작업을 측정하는 것은 다소 유용합니다. 실제로는 긴 작업이 발생했다는 사실과 걸린 시간을 제외하고는 그다지 많은 정보를 제공하지 않습니다.
실시간 사용자 모니터링 (RUM) 도구는 종종 이를 사용하여 긴 작업의 수 또는 기간을 추세 분석하거나 긴 작업이 발생한 페이지를 식별합니다. 하지만 긴 작업의 원인에 관한 기본 세부정보가 없으면 이 정보를 제한적으로만 사용할 수 있습니다. Long Tasks API에는 기본 기여 분석 모델만 있습니다. 이 모델은 긴 작업이 발생한 컨테이너(최상위 문서 또는