JavaScript 는 단일 스레드이므로 한 번에 하나의 작업 만 수행 할 수 있습니다. 이것은 직관적이고 잘 작동이 많은 경우에만 문제가 발생할 수 있습을 때 우리가 해야 하는 무거운 작업에 같은 데이터 처리,구문 분석,계산,또는 분석합니다. 으로 점점 더 복잡한 응용 프로그램 전달되는 웹에 있는 증가 필요를 위한 멀티 스레드 처리합니다.

웹 플랫폼에서 스레딩 및 병렬 처리를위한 주요 프리미티브는 웹 작업자 API 입니다. 작업자는 스레드 간 통신을 위해 메시지 전달 API 를 노출하는 운영 체제 스레드 위에 경량 추상화입니다. 이할 때 매우 유용할 수 있습니다 수행 비용이 많이 드는 계산이나 운영에 큰 데이터 수 있도록,main 스레드를 원활하게 실행할을 수행하는 동안 비용 작업에서 하나 이상의 백그라운드 스레드입니다.

여기에는 전형적인 예는 작업자의 사용,어디자 스크립트를 수신하는 메시지에서 스레드 응답을 보내시는 메시지는 자신의:

페이지입니다.나는 이것을 할 수 없다.js:

addEventListener('message', e => {
if (e.data === 'hello') {
postMessage('world');
}
});

웹 작업자 API 는 10 년 이상 대부분의 브라우저에서 사용할 수 있습니다. 는 의미하는 노동자들이 우수한 브라우저 지원 및 최적화되어,그것은 또한 그들은 오래전 JavaScript 모듈을 사용합니다. 가 없었기 때문에 모듈 시스템을 때 근로자들은 설계,API 로드하는 코드로 작업자 및 구성 스크립트가 남아와 유사한 동기식 스크립트 로딩 방식에서 일반적 2009.

History:classic workers#

작업자 생성자는 문서 URL 에 상대적인 클래식 스크립트 URL 을 사용합니다. 그것은 즉시 반환을 참조하여 새로운 작업자 인스턴스를 노출하는 메시징 인터페이스뿐만 아니라terminate()방법 즉시 멈추고 파괴 노동자입니다.

const worker = new Worker('worker.js');

importScripts()<script>태그를 의미하는 변수 중 하나에서는 스크립트로 덮어쓸 수 있는 변수 등이 있습니다.

작업자.나는 이것을 할 수 없다.js:

// global to the whole worker
function sayHello() {
return 'world';
}

이러한 이유로,웹 노동자들이 역사적으로 부과물에 대한 효과 건축의 응용 프로그램입니다. 개발자는 최신 개발 관행을 포기하지 않고 웹 작업자를 사용할 수 있도록 영리한 툴링 및 해결 방법을 만들어야했습니다. 예를 들어,bundlers 같은 웹팩 포함하는 작은 로더 모듈로 구현으로 생성된 코드를 사용하는importScripts()코드에 대해 로드,하지만 감싸서 모듈의 기능을 방지하는 변수의 충돌 및 시뮬레이션 속국 수입품과 수출액.

입력 모듈은 노동자들#

새로운 모드 웹 근로자의 인체공학적 설계 및 성능 자바 스크립트의 모듈에는 배송에서 크롬 80 라는 모듈은 노동자입니다. Worker{type:"module"}<script type="module">.

const worker = new Worker('worker.js', {
type: 'module'
});

이 모듈은 노동자들이 표준 JavaScript 모듈을 사용할 수 있습니다 가져오기 및 내보내기 문이 있습니다. 모든 자바 스크립트 모듈과 마찬가지로 종속성은 주어진 컨텍스트(주 스레드,작업자 등)에서 한 번만 실행됩니다.),그리고 미래의 모든 가져 오기는 이미 실행 된 모듈 인스턴스를 참조합니다. 자바 스크립트 모듈의 로딩 및 실행은 또한 브라우저에 의해 최적화됩니다. 모듈의 종속성은 모듈이 실행되기 전에로드 될 수 있으므로 전체 모듈 트리를 병렬로로드 할 수 있습니다. 모듈 로딩 또한 캐시 코드에 구문 분석,의미하는 모듈에서 사용되는 메인 스레드 및에서 작업자가만 필요한 구문 분석하다.

이동 자바스크립트는 모듈을 사용할 수 있게 합의 동적 가져오기 위한 지연 로드 코드를 차단하지 않고 실행은 노동자입니다. 동적 가져오는 것은 훨씬 더 많은 명시적인 사용하는importScripts()을 로드 종속기 때문에,수입 모듈의 수출액은 반환에 의존하기보다는 전역 변수.

작업자.나는 이것이 어떻게 작동하는지 잘 모르겠습니다.js:

import greetings from './data.js';
export function sayHello() {
return greetings.hello;
}

을 위한 성능,기존importScripts()this에서 최고 수준의 범위 JavaScript 모듈은undefinedselfglobal 이 항상있었습니다. 그것은 서비스 노동자를 포함하여 노동자의 모든 유형에서,뿐 아니라 DOM 에서 유효합니다.

미리 로드하는 노동자로 modulepreload#

한 실질적인 성과 개선을 함께 제공되는 모듈은 노동자들의 능력을 미리 로드하는 노동자와 그 종속성입니다. 모듈 노동자,스크립트가 로드되어 실행되는 기준으로 JavaScript 모듈을 의미하는,그들이 예압될 수 있습도 pre-분석을 사용하여modulepreload

<!-- preloads worker.js and its dependencies: -->
<link rel="modulepreload" href="worker.js">
<script>
addEventListener('load', () => {
// our worker code is likely already parsed and ready to execute!
const worker = new Worker('worker.js', { type: 'module' });
});
</script>

탑재 모듈을 사용할 수도 있습을 모두 main 스레드와 모듈을 노동자입니다. 이 모듈에 가져오는 두 컨텍스트에서 또는 경우에는 그것이 가능하지 않은 사전에 알고 있는지 여부 모듈을 사용되는 것에 main 스레드에서 또는 노동자입니다.

이전에 사용할 수 있는 옵션을 미리 로드 웹 작업자 스크립트가 제한되었고 반드시 신뢰할 수 있습니다. 클래식 작업자는 사전로드를 위해 자체”작업자”리소스 유형을 가졌지 만 브라우저는<link rel="preload" as="worker"><link rel="prefetch">,이는 전적으로 의존하는 HTTP 캐시입니다. 과 함께 사용하는 경우 올바른 캐싱 헤더,이를 방지하는 작업자 인스턴스화 기다릴 필요하 다운로드 작업자 스크립트입니다. 그러나modulepreload와 달리이 기술은 사전로드 종속성 또는 사전 구문 분석을 지원하지 않았습니다.공유 작업자는 어떻게해야합니까? #

공유 작업자는 Chrome83 으로 JavaScript 모듈을 지원하여 업데이트되었습니다. 전용 노동자,건설 공유와 작업자는{type:"module"}옵션을 로드하는 작업자 스크립트로 모듈이 아닌 클래식 스크립트:

const worker = new SharedWorker('/worker.js', {
type: 'module'
});

이전에 지원 자바 스크립트의 모듈SharedWorker()생성자를 예상 URL 을 선택nameoptionsnamename인수입니다.

서비스 작업자는 어떻습니까? #

서비스는 작업자의 명세는 이미 지원하도록 업데이트되었습니다 수락 JavaScript 모듈은 항목으로 포인트를 사용하여,같은{type:"module"}옵션 모듈은 노동자,그러나 이러한 변화는 아직 구현되는 브라우저에서. 일단 일어나는,그것이 가능할 것이 인스턴스화하는 작업자 서비스 자바 스크립트를 사용하여 모듈을 사용하여 다음과 같은 코드:

navigator.serviceWorker.register('/sw.js', {
type: 'module'
});

이제는 사양 업데이트되었습니다,브라우저는 시작을 구현하는 새로운 동작이다. 자바 스크립트 모듈을 서비스 작업자에게 가져 오는 것과 관련된 몇 가지 추가 합병증이 있기 때문에 시간이 걸립니다. 서비스 작업자 등록이 필요 비교를 가져온 스크립트와 그들의 캐시 이전 버전지 여부를 결정할 때를 트리거하도록 업데이트 및 이 구현되어야 하 JavaScript 모듈을 사용할 때 서비스를 위해 노동자입니다. 또한 서비스 작업자는 업데이트를 확인할 때 특정 경우에 스크립트에 대한 캐시를 우회 할 수 있어야합니다.