Web Locks API는 무엇이며 다중 프로세스 웹 앱을 어떻게 향상시킬 수 있습니까?

잠글 시간

자바 스크립트의 비동기 함수는 실제로 병렬이 아닙니다. ES2017부터 Javascript는 동시 함수 호출을 지원합니다. 차이점은 Madhavan Nagarajan이 다음 진술에서 매우 잘 요약합니다 (링크는 부록에서 찾을 수 있음).

동시성은 한 번에 많은 것을 처리하는 것입니다. 병렬 처리는 한 번에 많은 작업을 수행하는 것입니다.

Javascript의 동시성 구현은 단순하고 매우 강력한 API를 사용할 수 있도록 기능이 감소합니다. 비동기 함수는 중단 될 수 없으며 다른 비동기 호출로 동일한 변수에 대한 액세스를 처리 할 때 휘발성 속성에 대한 개념이 없습니다. ES2017의 비동기 함수에 대한 자세한 구현은이 기사의 범위를 벗어 났지만 지금까지 다루고 싶은 요점은 병렬 처리가 자바 스크립트와 웹에 내장되지 않았기 때문에 병렬 변이에 대한 특별한 처리가 없다는 것입니다. 같은 개체. 그러나 이제는 "Web Locks API"의 도입으로 변경되었습니다.

모두를 위해 하나, 하나를 위해 모두

이제 프로그레시브 웹 앱이 WebWorkers 및 ServiceWorker를 도입하여 진정한 멀티 스레드 아키텍처를 제공하므로 상황이 변경되었습니다. 웹 앱에서 진정한 병렬 처리가 가능하므로 병렬 코드를 처리하기위한보다 정교한 도구에 대한 욕구가 생깁니다.

잠금은 리소스에 대한 액세스를 요청하는 메커니즘이며 어느 시점에서든 하나의 프로세스 만 실제로 액세스 할 수 있음을 보장합니다. 이러한 방식으로 리소스를 잠그면 다른 경우에 발생할 수있는 대규모 충돌 영역 집합을 피할 수 있습니다.

리소스는 문자열로 식별되는 네임 스페이스 일뿐입니다. 리소스에 대한 액세스 요청은 "Web Lock API"를 구현하기 위해 ID와 함수 콜백 (대부분 비동기식) 만 필요하므로 간단합니다. 하나의 비동기 함수가 완료되면 잠금이 해제되고 다른 요청이 다시 액세스 할 수 있습니다.

/*
 * A simple demonstration of the Web Lock API.
 * Note that this example has been taken from
 * MDN's awesome documentation, linked in the
 * addendum.
 */
async function foo(){
  // A common async function that you already know.
  const data = await getData();

  // Request the lock.
  // Note that we can simply await the locked call!
  await navigator.locks.request('lock_resource_id', async lock => {
    // The lock has been acquired.
    // At this point, this call has exlusive access 
    // to the resource 'lock_resource_id'.
    await updateDb(data);
    // Now the lock will be released.
  });
  
  // The lock has been released.
  // Continuse with plain async calls.
  await updateUi();
}

이 새로운 API의 실험적 상태로 인해 유효한 대체를 사용할 수있는 코드의 선택적 기능으로 처리해야합니다.

/**
 * Due to the usage of web locks in core parts
 * of your app, actually using the API this way
 * might introduce more problems then it could solve.
 * 
 * Therefore a thorough specification in your app
 * has to be implementation before using this feature.
 */
async function update(){
  if(navigator?.locks){
    // Run logic with lock.
  } else {
    // Use fallback.
  }
}

이 새로운 API를 더 잘 설명하기 위해 간단한 예를 살펴 보겠습니다. 주 프로세스와 두 개의 WebWorker가있는 다중 스레드 PWA가 있다고 가정 해 보겠습니다. 또한 앱은 데이터베이스와의 변경 사항을 클라우드와 동기화하는 사용자 지정 코드와 함께 IndexDB를 사용합니다. 이 시나리오에서 "Web Lock API"를 사용하면 모든 프로세스가 데이터베이스에 대한 변경 사항을 동기화하기 위해 정의 된 잠금에 대한 액세스를 요청할 수 있으므로이 호출 중에 다른 변형이 실행되지 않도록합니다.

"Web Lock API"는 웹 앱에서 부작용없이 단일 변수를 변경하는 것이 아니라 (확실히 사용 사례 일 수 있음) 병렬 아키텍처에서 함수 호출을 처리하는 것에 관한 것입니다. 부정적인 부작용.