메인 스레드 최적화를 위한 Scheduling API

😺스케줄링이란? 메인 스레드는 자바스크립트 실행 이외 렌더링, 네트워트 응답, GC 등 다양한 역할을 수행합니다. 메인 스레드에 많은 작업들이 예약되면 웹 사이트의 성능과 사용성 경험이 저하됩니다. 그러므로 스케줄링을 통해 우선순위가 다른 작업을 효율적으로 등록하고 제어합니다. 😺브라우저 지원 범위 - 지원 브라우저: Chrome / Edge / Opera - 미지원 브라우저: Firefox / Safari 😺Native Scheduling API가 필요한 이유? ▶️1. 메인 스레드에서 협력하는 행위자들 간의 조정 애플리케이션은 1st-party, 1st-party 라이브러리, 3rd-party 라이브러리 및 프레임워크 스크립트로 구성될 수 있습니다. 동시에 브라우저는 fetch() 및 GC, 렌더링 같은 메인 스레드에 실행할 작업들이 있습니다. Native Scheduling API를 통해 공유된 우선순위 개념을 갖는 것은 브라우저가 더 효율적인 스케줄링 결정을 내리는 데 도움이 되고 사용자 경험을 향상시키는데 도움이 될 수 있습니다. ▶️2. 서로 다른 Scheduling API 스크립트 청크를 스케줄링해야 함에도 불구하고 플랫폼에는 통합 API가 부족합니다. 개발자는 작업을 스케줄링할 때 setTimeout, requestAnimationFrame, requestIdleCallback, postMessage을 선택할 수 있습니다. 이러한 다른 Scheduling API는 개발자가 스케줄링 코드를 작성하는 것을 더욱 어렵게 하며 이를 위해서는 브라우저의 이벤트 루프에 대한 지식이 필요합니다. ▶️3. 브라우저에 양보할 시기 결정 사용성을 위해서 브라우저에게 적절하게 메인 스레드를 양보해야 합니다. 하지만 양보에는 오버헤드가 있습니다. 작업 등록 및 컨텍스트 전환에 따른 오버헤드, 제어권 획득 비용이 등으로 인해 작업 지연 시간이 증가할 수 있습니다. Native Scheduling API에서는 isInputPending() 및 isFramePending()으로 양보할 시기를 체크할 수 있습니다. 또한 scheduler.yield()로 양보하고 제어권을 찾을 수 있습니다. 😺Scheduling API 기능 웹 사이트 개발자 코드 또는 3rd-party 라이브러리 및 프레임워크처럼 애플리케이션에 속한 모든 작업의 우선순위를 지정하는 표준화된 방법을 제공합니다. API는 Promise 기반이며 작업 우선순위를 설정 및 변경하고, 스케줄러에 추가되는 작업을 지연하고, 작업을 중단하고, 우선순위 변경 및 중단 이벤트를 모니터링하는 기능을 지원합니다. ▶️기능 체크 현재 스코프에 노출된 global this에서 scheduler 속성을 테스트하여 API가 이 브라우저에서 지원되는 경우 아래 코드는 Feature: Supported을 출력합니다. --- if ("scheduler" in this) { console.log("Feature: Supported"); } else { console.log("Feature: Not Supported"); } --- ▶️우선 순위 두 번째 인자 옵션에서 priority 프로퍼티를 사용하여 작업 우선순위를 설정할 수 있습니다. 우선순위는 user-blocking, user-visible, background로 자세한 실행 시점은 다음과 같습니다: user-blocking - 사용자의 페이지와 상호 작용하는 것을 중지하는 작업 - 페이지를 사용할 수 있는 지점까지 렌더링 하거나 사용자 입력에 응답하는 작업을 중지함 user-visible - 기본 우선순위 - 사용자가 볼 수 있지만 사용자 작업을 반드시 차단할 필요는 없는 작업 - 페이지의 비필수적인 이미지 또는 애니메이션을 렌더링 하는 작업에서 사용됨 background - 시간이 중요하지 않는 작업 - 렌더링에 필요하지 않는 로그 처리 또는 3rd-party 라이브러리 초기화 작업에 사용됨 --- const log = txt => () => console.log(txt); if ("scheduler" in this) { scheduler.postTask(log("background 1"), { priority: "background" }); scheduler.postTask(log("user-visible 1"), { priority: "user-visible" }); scheduler.postTask(log("user-blocking 1"), { priority: "user-blocking" }); scheduler.postTask(log("background 2"), { priority: "background" }); scheduler.postTask(log("user-visible 2"), { priority: "user-visible" }); scheduler.postTask(log("user-blocking 2"), { priority: "user-blocking" }); scheduler.postTask(log("user-visible 3 (default)")); } --- 아래 로그는 위 작업의 출력을 보여줍니다. --- user-blocking 1 user-blocking 2 user-visible 1 user-visible 2 user-visible 3 (default) background 1 background 2 --- ▶️작업 지연 두 번째 인자 옵션에서 delay 프로퍼티에 정수 밀리초를 지정하여 작업을 지연시킬 수 있습니다. 이렇게 하면 setTimeout()를 사용하여 생성될 수 있는 것처럼 시간 초과 시에 작업이 우선순위 큐에 효과적으로 추가됩니다. delay은 작업이 스케줄러에 추가되기 전까지의 최소 시간이므로 시간이 더 길 수도 있습니다. --- if ("scheduler" in this) { scheduler .postTask(() => "Task delayed by 2000ms", { delay: 2000 }) .then((taskResult) => console.log(taskResult)); scheduler .postTask(() => "Next task should complete in about 2000ms", { delay: 1 }) .then((taskResult) => console.log(taskResult)); } --- 두 번째 문자열은 약 2초 후에 로그에 표시됩니다. --- Next task should complete in about 2000ms Task delayed by 2000ms --- ▶️작업 중단 TaskController 또는 AbortController를 사용하여 정확히 같은 방식으로 작업을 중단할 수 있습니다. 차이점은 작업 우선 순위도 설정하려면 TaskController를 사용해야 합니다. 아래 코드는 TaskController를 생성하고 signal에 전달합니다. abortTaskController.abort()를 실행하면 Promise가 거부되고 catch 블록에 걸려 기록됩니다. --- if ("scheduler" in this) { const abortTaskController = new TaskController(); scheduler .postTask(() => console.log("Task executing"), { signal: abortTaskController.signal, }) .then((taskResult) => console.log(taskResult)) .catch((error) => console.log(`Error: ${error}`)); abortTaskController.abort(); } --- 아래 로그에는 작업 중단 로그가 표시됩니다. --- Error: AbortError: signal is aborted without reason --- ▶️우선순위 변경 두 번째 인자 옵션에서 signal 프로퍼티에 TaskController를 지정할 수 있으며 초기 우선순위를 설정할 수 있습니다. 그런 다음 addEventListener()을 사용해서 우선순위 변경의 이벤트를 받을 수 있고, setPriority()을 호출하여 우선순위를 변경할 수 있습니다. --- if ("scheduler" in this) { const controller = new TaskController({ priority: "user-blocking" }); controller.signal.addEventListener("prioritychange", (event) => { const previousPriority = event.previousPriority; const newPriority = event.target.priority; console.log(`Priority changed from ${previousPriority} to ${newPriority}.`); }); scheduler.postTask(() => console.log("Task"), { signal: controller.signal }); controller.setPriority("background"); } --- 아래 출력은 우선순위가 user-blocking에서 background로 변경되었음을 보여줍니다. --- Priority changed from user-blocking to background. Task --- https://the-next-web-research-lab.github.io/next-web-research/scheduling-api.html