= 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 : 표 추가 필요) = 참고 = http://cafe.naver.com/webappdev.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=141&social=1 http://cdkkcdkktoandroid.tistory.com/12 http://seye2.egloos.com/2451233