Time slicing

Time slicing 공부 📖

큰 렌더링 작업을 한 번에 끝까지 몰아서 하지 않고, 잘게 나눠서 조금씩 처리하는 방식.

예를들어 브라우저가

리액트 렌더링
사용자가 누른 입력에 반응하기
사용자가 스크롤 할 때 반응하기
애니메이션 그리기

이렇게 있다고 할 때 무거운 렌더를 한 번에 쭉 하면 그동안 브라우저가 다른 일을 못해서 버벅임이 발생할 수 있다.

예를 들면 이렇게 :

사용자가 클릭함
근데 지금 메인 스레드가 무거운 렌더 작업 중
클릭 이벤트가 발생했지만 바로 실행 못함
입력이 버벅거리는것처럼 느껴짐

그래서 time slicing은 아래와 같이 동작한다 :

렌더링 작업 조금 함
중간에 잠깐 멈춤
그 사이 브라우저가 클릭/스크롤/화면 업데이트 처리
다시 렌더링 이어서 함

즉 긴 작업을 잘게 쪼개서 사용자 입력을 막지 않게 만드는 것.

time slicing을 직접 api처럼 쓰는 개념보다는 concurrent rendering의 내부 동작 방식/특성으로 이해하는게 더 맞다.

즉 time slicing은 리액트가 렌더링을 쪼개서 중간에 양보할 수 있게 하는 아이디어/방식이고, concurrent rendering은 그걸 포함해서 리액트가 업데이트 우선순위를 조절하고, 중간에 멈췄다가 버리고 다시 시작할 수도 있는 더 큰 렌더링 모델이다.

정리하면,

Time slicing : concurrent rendering을 가능하게 하는 중요한 성질 중 하나
Concurrent rendering : time slicing 보다는 큰 개념 (time slicing을 포함한 상위 렌더링 모델)

Time slicing은 concurrent rendering과 달리 리액트 전용 용어는 아니다.

긴 작업을 조각으로 나눠서 중간 중간 다른 중요한 작업이 끼어들 수 있게 하는 방식 자체를 가리키는 말이다.

브라우저에서 긴 js 작업을 쪼개서 실행하거나, 스케줄러가 CPU 작업을 시간 단위로 나눠 처리하거나, UI 프레임워크가 렌더링 작업을 조금씩 나눠서 반응성을 유지하는 경우 모두 포함한다.

그렇다면 setTimeout도 time slicing 구현 수단 중 하나인가?

맞다. 아래 코드는 setTimeout을 사용해 time slicing을 구현한 사례라고 볼 수 있다.

const items = Array.from({ length: 10000 }, (_, i) => i + 1);
let index = 0;
const chunkSize = 100;

function processChunk() {
  const end = Math.min(index + chunkSize, items.length);

  for (let i = index; i < end; i++) {
    console.log('처리중:', items[i]);
  }

  index = end;

  if (index < items.length) {
    setTimeout(processChunk, 0);
  } else {
    console.log('모든 작업 완료');
  }
}

processChunk();

10000개를 한 번에 다 돌리지 않고, 100개씩 끊어서 처리한 다음 다음 태스크로 넘기는 방식.
그래서 브라우저가 중간에 클릭, 스크롤, 화면 업데이트를 할 기회를 얻는다.

setTimeout 말고도, requestAnimationFrame, requestIdleCallback, MessageChannel 등을 이용할 수 있다.

requestAnimationFrame

다음 화면 그리기 직전에 이 함수 실행할게, 하고 예약해주는 api

const items = Array.from({ length: 5000 }, (_, i) => i + 1); //1부터 5000까지 작업 목록 생성
let index = 0; //지금 어디까지 처리했는지 가리키는 포인터
const chunkSize = 100; //한 번에 몇 개씩 처리할지 

function processChunk() {
  const end = Math.min(index + chunkSize, items.length);

  for (let i = index; i < end; i++) {
    console.log('처리중:', items[i]);
  }

  index = end;

  if (index < items.length) {
    requestAnimationFrame(processChunk); //아직 처리할 게 남아있으면 다음 프레임 직전에 processChunk 실행 예약
  }
}

requestAnimationFrame(processChunk); //첫 시작

requestIdleCallback

브라우저가 한가해지면 (idle period, 한가한 시간) 낮은 우선순위 작업을 실행하도록 예약하는 브라우저 api

const items = Array.from({ length: 5000 }, (_, i) => i + 1); //1부터 5000까지 작업 목록 생성
let index = 0; //지금 어디까지 처리했는지 가리키는 포인터
const chunkSize = 100; //한 번에 몇 개씩 처리할지 

function processChunk() {
  const end = Math.min(index + chunkSize, items.length);

  for (let i = index; i < end; i++) {
    console.log('처리중:', items[i]);
  }

  index = end;

  if (index < items.length) {
    requestIdleCallback(processChunk, { timeout: 1000 });  //아직 처리할 게 남아있으면 브라우저가 한가할 때 processChunk 실행
  }
}

requestIdleCallback(processChunk, { timeout: 1000 }); //첫 시작 (* timeout : 1000 : 브라우저가 바빠도 1초 안에는 실행 옵션 )

MessageChannel

자바스크립트 안에서 서로 메시지를 주고받을 수 있는 작은 통로 2개를 만들어주는 api

const items = Array.from({ length: 10000 }, (_, i) => i + 1); //데이터 10000개 준비
let index = 0; //지금 어디까지 처리했는지 가리키는 포인터
const chunkSize = 100; //한 번에 몇 개씩 처리할지 

const channel = new MessageChannel(); //통로 2개 생성
channel.port1.onmessage = processChunk; //port1이 메시지를 받으면 processChunk 실행

function processChunk() {
  const end = Math.min(index + chunkSize, items.length);

  for (let i = index; i < end; i++) {
    console.log('처리중:', items[i]); //index부터 end -1 까지 돌면서 아이템 처리
  }

  index = end;

  if (index < items.length) {
    channel.port2.postMessage(null); //아직 처리할 게 남아있으면, port2로 메시지를 보내서 다음 chunk 실행을 예약
  }
}

channel.port2.postMessage(null); //첫 시작 

구분하자면

Time slicing : 작업을 잘게 나눠 처리하는 성질
Concurrent rendering : 리액트가 우선순위를 보고 렌더를 유연하게 처리하는 방식
startTransition / useTransition : 급하지 않은 업데이트를 뒤로 미루게 하는 도구
useDeferredValue : 무거운 값 반영을 조금 늦추는 도구