Web Workers JavaScript API 소개

웹 노동자 다음과 같은 작업을 수행 할 수있는 자바 스크립트 API입니다. 주 스레드와는 별도의 스레드에서 스크립트를 실행하십시오.. 백그라운드 스크립트와 같이 기본 스크립트를 실행하는 데 방해가되지 않으면 편리하게 사용할 수 있습니다..

웹 근로자 API는 거의 모든 브라우저에서 지원, 자세한 내용은 CanIUse 문서를 참조하십시오. 코드를 작성하기 전에이 API를 사용하여 내가 의미하는 바를 알 수있는 몇 가지 시나리오를 살펴 보겠습니다. 배경 화면 스크립트.

사용 사례

스크립트가 있다고 가정 해 봅시다. 파일을 가져 와서 처리한다.. 파일이 상당히 큰 경우 처리 시간이 오래 걸립니다! 나중에 실행 된 다른 스크립트를 멈출 수 있습니다..

그러나 파일 처리가 백그라운드 스레드로 이동 됨, 로 알려진 작업자 스레드, 다른 이벤트는 이전 이벤트가 끝날 때까지 차단되지 않습니다..

스크립트 배경 작업자 스레드에서 실행 라고합니다. 작업자 스크립트 또는 노동자.

다른 예를 들어, 큰 형태, 탭으로 배열. 하나의 탭에서 컨트롤을 업데이트하는 방식으로 스크립트되었습니다. 다른 사람의 통제에 영향을 준다..

다른 탭의 업데이트에 약간의 시간이 걸리면 현재 탭을 계속 사용할 수 없습니다. 이벤트가 보류되지 않고 이로 인해 사용자 인터페이스가 정지 될 수 있습니다..

사용자가 현재 탭을 채우는 동안 다른 탭을 보지 않으므로 백그라운드 스레드에서 다른 탭의 컨트롤을 업데이트하십시오.. 이렇게하면 다른 탭의 컨트롤을 업데이트하는 과정에서 스크립트가 차단되지 않고 사용자가 채우고있는 현재 탭을 계속 사용할 수 있습니다..

마찬가지로 스크립트가있는 시나리오를 찾으면 사용자가 사용자 인터페이스를 사용하지 못하도록 차단할 수 있습니다. 실행이 끝날 때까지 백그라운드에서 실행될 수 있도록 작업자 스레드로 이동하는 것을 고려할 수 있습니다.

범위와 노동자 유형

Web Workers API는 아마도 가장 간단한 API 중 하나 일 것입니다. 그것은 매우 간단한 방법을 가지고 있습니다. 작업자 스레드 생성 과 메인 스크립트에서 그들과 대화한다..

작업자 스레드의 전역 범위는 주 스레드와 다른 컨텍스트에 있습니다. 당신 의 메소드 및 속성에 액세스 할 수 없습니다. 창문 목적 와 같은 경보() 작업자 스레드 내부. 너도 DOM을 직접 변경할 수 없다. 작업자 스레드에서.

그러나, 당신은 양철통 다음에 나오는 많은 API를 사용하십시오. 창문, 예를 들면 약속 과 술책, 작업자 스레드에서 (전체 목록 참조).

당신은 또한 중첩 된 작업자 스레드: 다른 작업자 스레드에서 생성 된 작업자 스레드. 다른 작업자가 만든 작업자를 a 하위 노동자.

또한있다 많은 유형 노동자. 두 가지 주요 사항은 다음과 같습니다. 헌신적이고 공유 된 노동자들.

전용 근로자 같은 브라우징 컨텍스트에 속한다. 그들의 주 스레드가 속해있다. 그러나 공유 된 근로자들은 다른 브라우징 컨텍스트에있다. (예를 들어, iframe에서) 주 스크립트에서. 두 경우 모두 주 스크립트와 작업자 동일한 도메인에 있어야한다..

이 자습서의 예는 헌신적 인 노동자에 대해, 가장 일반적인 유형.

API 메소드

아래 다이어그램을 참조하십시오. 모든 주요 방법의 빠른 개요 Web Workers API를 구성하는.

그만큼 노동자() 건설자 전용 작업자 스레드를 생성합니다. 과 그것의 참조 객체를 돌려 준다.. 그런 다음이 개체를 사용하여 특정 작업자와 통신합니다..

그만큼 postMessage () 메소드는 주 스크립트와 작업 스크립트에서 모두 사용됩니다. 서로에게 데이터를 보낸다.. 그러면 전송 된 데이터가 메시지에 이벤트 핸들러.

그만큼 끝내다() 방법 주 스크립트에서 작업자 스레드를 종료합니다.. 이 종료는 즉시의현재 스크립트 실행 및 보류중인 스크립트는 취소됩니다. 그만큼 닫기() 메소드는 똑같은 일을하지만, 작업자 스레드가 스스로를 닫음으로써 호출 됨.

예제 코드

이제 샘플 코드를 살펴 보겠습니다. 그만큼 index.html 페이지에는 메인 스크립트 내부

우리는 주 스크립트에서 작업자 스레드 생성.

 w = 새 작업자 ( 'worker.js'); 

 w = 새 작업자 ( 'worker.js'); w.onmessage = (e) => console.log ( '작업자로부터받은 : $ e.data');  

 document.querySelector ( 'button'). onclick = () => w.postMessage ( 'john');  

 console.info ( 'worker created'); onmessage = (e) => postMessage ( '안녕 $ e.data');