U E D R , A S I H C RSS

html5/web-workers

WEB WORKERS

  • 웹 워커 : 자바스크립트 코드를 백그라운드에서 실행하기 위한 기술
  • 워커 : 백그라운드에서 실행되는 코드, UI(DOM)과는 완전히 분리된 환경에서 동작
    • 현재 브라우저와 웹어플리케이션이 가진 설계상의 문제로 생겨남

  • 현재 웹브라우저는 웹페이지를 하나의 스레드로 실행
    • 처리할 내용이 많아지면 사용자는 페이지를 조작할 수 없음
    • 이 문제를 해결하기 위해 Web workers를 사용
      • web workers가 메인 스레드(웹 페이지)와는 별도의 백그라운드 프로세스로 자바스크립트 실행
      • 병렬 처리가능

  • 종류
    • 일 대 일 : <워커>, 하나의 워커 객체와 하나의 백그라운드 프로세스가 일대일로 대응
    • 다 대 일 : <공유 워커>, 여러개의 워커 객체가 하나의 백그라운드 프로세스와 대응

워커를 이용한 프로그래밍

  • 워커는 생성시부터 UI와 다른 스레드에서 동작
    • UI와 워커 스레드는 변수를 공유할 수 없다.
    • 따라서 워커는 DOM에 접근할 수 없다.

워커의 생성

  • 워커 인터페이스 생성자에 JavaScript 소스 파일의 URL인수로 전달하면 소스파일을 내려받아 백그라운드에서 실행한다
  • 지역변수, 지역함수이므로 외부에서 호출 불가!

 
 // workers.js를 실행하여 워커를 생성
 var worker = new Worker("worker.js");

워커와의 통신

  • 워커에게 메세지 송신
    • 워커와의 메세지 통신은 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과 이름이 같으면 같은 프로세스 공유

 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 : 표 추가 필요)

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:31:41
Processing time 0.0349 sec