WEB WORKERS ¶
- 웹 워커 : 자바스크립트 코드를 백그라운드에서 실행하기 위한 기술
- 워커 : 백그라운드에서 실행되는 코드, UI(DOM)과는 완전히 분리된 환경에서 동작
- 현재 브라우저와 웹어플리케이션이 가진 설계상의 문제로 생겨남
- 현재 브라우저와 웹어플리케이션이 가진 설계상의 문제로 생겨남
- 현재 웹브라우저는 웹페이지를 하나의 스레드로 실행
- 처리할 내용이 많아지면 사용자는 페이지를 조작할 수 없음
- 이 문제를 해결하기 위해 Web workers를 사용
- web workers가 메인 스레드(웹 페이지)와는 별도의 백그라운드 프로세스로 자바스크립트 실행
- 병렬 처리가능
- web workers가 메인 스레드(웹 페이지)와는 별도의 백그라운드 프로세스로 자바스크립트 실행
- 처리할 내용이 많아지면 사용자는 페이지를 조작할 수 없음
- 종류
- 일 대 일 : <워커>, 하나의 워커 객체와 하나의 백그라운드 프로세스가 일대일로 대응
- 다 대 일 : <공유 워커>, 여러개의 워커 객체가 하나의 백그라운드 프로세스와 대응
- 일 대 일 : <워커>, 하나의 워커 객체와 하나의 백그라운드 프로세스가 일대일로 대응
워커를 이용한 프로그래밍 ¶
- 워커는 생성시부터 UI와 다른 스레드에서 동작
- UI와 워커 스레드는 변수를 공유할 수 없다.
- 따라서 워커는 DOM에 접근할 수 없다.
- UI와 워커 스레드는 변수를 공유할 수 없다.
워커의 생성 ¶
- 워커 인터페이스 생성자에 JavaScript 소스 파일의 URL인수로 전달하면 소스파일을 내려받아 백그라운드에서 실행한다
- 지역변수, 지역함수이므로 외부에서 호출 불가!
// workers.js를 실행하여 워커를 생성 var worker = new Worker("worker.js");
워커와의 통신 ¶
- 워커에게 메세지 송신
- 워커와의 메세지 통신은 postMessage()를 이용
- 워커와의 메세지 통신은 postMessage()를 이용
// 워커에게 메세지 hello보냄 worker.postMessage("hello");
// 워커에서의 메세지 처리 onmessage = function(e){ // 처리 };
- 워커의 메세지 송신
// 전역함수 postMessage 사용 postMessage("hello");
// 워커의 메세지 처리 worker.onmessage = function(e){ // 처리 };
워커 생성 ¶
- 워커생성 : Worker 이용
// worker.js이용해 생성 var worker = new Worker("worker.js");
- 공유 워커 생성 : SharedWorker 이용
- 공유 워커는 윈도우가 달라도 URL과 이름이 같으면 같은 프로세스 공유
- 공유 워커는 윈도우가 달라도 URL과 이름이 같으면 같은 프로세스 공유
var worker1 = new SharedWorker("worker.js", "wk"); var worker2 = new SharedWorker("worker.js", "wk");
워커 객체의 메소드 ¶
- onerror : 에러 포착하기 위한 이벤트 핸들러
- terminate() : 워커 강제 종료
- postMessage(message, ports) : 워커에게 메세지 보냄
- onmessage() : 워커로부터의 메세지 수신을 위한 이벤트 핸들러
워커에서 사용가능한 변수, 메서드, 생성자 ¶
- window, document사용 불가
- onmessage(), postMessage(), onconnect()등 사용가능
- (TODO : 표 추가 필요)