Frontend Archive

성능 개선

성능 개선 주제로 정리한 글 1개입니다.

아티클 목록

메인스레드 쉬는 시간 압수하기

메인스레드 쉬는 시간 압수하기

브라우저의 메인 스레드는 언제나 바쁘다현대 웹 애플리케이션, 특히 복잡한 UI와 수많은 서드파티 스크립트(GTM, Ads, Maps 등)를 품은 페이지에서 메인 스레드 블로킹은 필연적입니다. 메인 스레드가 막히면 TBT(Total Blocking Time)가 치솟고, 사용자의 첫 입력 지연(FID)이 악화됩니다. 초기 렌더링에 당장 필요 없는 작업들을 어떻게 영리하게 뒤로 미룰 것인가?그 해답으로 적용했던 requestIdleCallback에 대해서 정리하고자 합니다. requestIdleCallback은 어떻게 동작하는가?우리가 매일 사용하는 웹 브라우저는 겉보기에 단순해 보이지만, 사용자에게 끊김 없는 화면을 보여주기 위해 1초에 60번(60Hz 기준) 엄청난 속도로 화면을 다시 그립니다. 이 한 ..