Chrome의 Scheduler.yield API 이해하기

WHAT?

Scheduler.yield API는 Chrome JavaScript의 새로운 기능으로, 웹사이트를 더 빠르고 부드럽게 만들어준다. 코드에서 중요한 작업을 수행하는 동안 JavaScript가 잠시 멈추고 다른 작업을 처리할 수 있도록 도와주는 교통 신호와 같다.

WHY?

웹사이트가 많은 작업을 수행하는 경우, 다른 작업을 처리할 수 없어 사용자가 클릭하였을 때 반응이 없거나 애니메이션이 느려지는 경우가 있다. Scheduler.yield API는 이러한 문제를 해결하는 데 도움을 준다.

원리

간단한 예로 설명하겠다:

예시) 대용량 식사를 준비해야 한다. 야채를 썰고, 밥을 끓이며, 닭고기를 튀긴다. 모든 작업을 중단 없이 수행하면 피곤해지고 실수를 하게 된다. 하지만 작은 휴식을 취하면 더 잘 요리하고 테이블 세팅하는 데 여유가 생긴다.

Scheduler.yield도 JavaScript 코드에 대해 같은 역할을 한다. 작고 짧은 휴식을 통해 백그라운드에서 다른 중요한 작업을 처리할 수 있게 한다.

코드 예시:

async function doManyCalculations() {
  for (let i = 0; i < 1000000; i++) { 
    let result = i * 2; 
    if (i % 10000 === 0) { 
      await scheduler.yield(); 
    } 
  } 
} 

이 예시에서 함수는 백만 개의 계산을 수행하지만, 매 10,000번마다 scheduler.yield()를 사용하여 잠시 휴식을 취한다. 이렇게 하면 브라우저가 다른 작업을 처리할 수 있게 된다.

사용해야 하는 이유

Scheduler.yield를 사용하면 다음과 같은 이점이 있다:

1. 더 나은 사용자 경험: 복잡한 작업 중에도 웹사이트가 응답성을 유지한다.
2. 부드러운 애니메이션: 브라우저가 화면을 업데이트할 시간이 생기므로 애니메이션과 스크롤 작업이 더 최근해진다.
3. 전반적으로 빠름: 대규모 작업에 걸쳐 웹사이트가 멈추지 않고 더 빠르게 느껴질 수 있다.

실사례

Scheduler.yield가 도움이 될 수 있는 상황을 살펴보자:

예시 1:

대량의 아이템 처리 10,000개의 제품 리스트를 보여주는 웹사이트를 생각해 보라. 모두 한 번에 로드하면 페이지가 느려질 수 있다. 다음과 같은 방법으로 Scheduler.yield를 사용할 수 있다:

async function loadProducts(products) { 
  for (let i = 0; i < products.length; i++) { 
    addProductToPage(products[i]); 
    if (i % 50 === 0) { 
      await scheduler.yield(); 
    } 
  } 
} 

예시 2:

복잡한 계산 수행 소수 번호를 찾는 복잡한 계산이 필요한 경우 Scheduler.yield를 사용하여 페이지가 응답성을 유지할 수 있다:

async function findPrimes(max) { 
  for (let i = 2; i <= max; i++) { 
    if (isPrime(i)) { 
      console.log(i + " is prime"); 
    } if (i % 1000 === 0) { 
      await scheduler.yield(); 
    } 
  }
} 

예시 3:

대용량 데이터 처리 수천 개의 이미지를 처리하고 각 필터를 적용하는 웹 애플리케이션을 개발하고 있다고 가정하자. 최적화가 없다면 이러한 작업은 브라우저를 정지시킬 수 있으며, UI가 응답하지 않게 된다. 다음 코드처럼 scheduler.yield()를 이용하여 UI 업데이트와 다른 이벤트 처리를 가능하게 할 수 있다:

async function processImages(images) { 
  const processedImages = []; 
  for (let i = 0; i < images.length; i++) { 
    processedImages.push(applyImageFilter(images[i])); 
    if (i % 50 === 0) { 
      await scheduler.yield(); 
      updateProgressBar((i / images.length) * 100); 
    } 
  } 
  return processedImages; 
} 

장점

scheduler.yield()는 특히 계산 집약적인 작업이나 부드러운 사용자 인터페이스를 유지해야 할 때 유용하다:

• 이미지 처리 도구
• 데이터 시각화
• 게임
• 텍스트 편집기

찍먹해보기

단, 아직 새로운 기능이므로 모든 웹 브라우저에서 지원하지는 않는다:

1. 최신 버전의 Chrome에서 사용 가능하다.
2. 다른 브라우저의 경우 대체 계획이 필요할 수 있다.
3. 사용 가능 여부를 다음과 같이 확인할 수 있다:

if ("scheduler" in window && "yield" in scheduler) { 
  console.log("We can use scheduler.yield!"); 
} else { 
  console.log("Oops, scheduler.yield isn't available."); 
} 

Fallback

async function takeAQuickBreak() { 
  if ("scheduler" in window && "yield" in scheduler) { 
    await scheduler.yield(); 
  } else { 
    await new Promise(resolve => setTimeout(resolve, 0));
  }
}

요약

1. Chrome 버전 129 이상을 사용. (혹은) chrome://flags를 통해 "scheduler.yield"를 활성화.
2. 원하는곳에서 브라우저가 다른 작업을 처리할 수 있도록 await scheduler.yield()를 사용.