Promise.race
Promise.race가 있는줄은 알았는데 이걸 어디다 써먹는 줄은 몰랐다. 잊고 지내서 미안.
Promise.race는 여러개의 비동기 작업들 중 가장 먼저 종료되는 하나의 resolve만을 취한다. 이 점을 이용해 비동기 작업의 timeout을 지정할 수 있다.
Promise.race(
fetch(API_URL),
new Promise(
resolve => setTimeout(() => resolve(new Error()), DELAY)
)
).then(log);이런식으로 쓰면 fetch의 타임아웃을 DELAY만큼 지정할 수 있고, DELAY 만큼의 시간이 지나도 response를 얻지 못하면 에러를 출력한다.
reqeustIdleCallback
브라우저의 메인 스레드(JavaScript의 실행 등을 담당)가 비어있으면 지정한 콜백 함수를 실행하도록 지시할 수 있다. 꽤 오랜 기간동안 'Proposed Recommendation'으로 남아있지만 Google에서는 콜백에서 DOM을 조작하지 않는 조건으로 사용을 권장한다. window 객체에 포함된 메소드다.
얼핏 들으면 이게 무슨 쓸모가 있나 싶지만 우선순위를 특정 작업의 우선순위를 뒤로 미룰 때 사용한다.
이 글을 보면 LINE 증권에서 레이지 로딩이 가능한 컴포넌트의 로딩을 지연시키는 방식으로 사용했다.
코드도 같이 첨부되어있는데, 핵심은 lazy loading을 적용할 컴포넌트의 import 자체를 늦추는 것이다. requestIdleCallback()은 메인 스레드가 처리중인 작업이 없을 때 콜백함수를 실행하기 때문에 callback의 우선순위가 뒤로 밀린다. LINE에서는 컴포넌트의 loading 자체를 후순위로 미루고 그보다 중요한 초기 페이지 렌더링을 앞으로 당겼다.
글을 작성한 Ryota Suzuki님은 이를 통해 초기 페이지의 LCP를 14%가량 단축하는데 성공했다고 한다.
나도 언젠간 쓸 일이 있겠지..
