HTML5 의 Web WorkerYongho Ji

Javascript 코드를 background 에서 실행시키기 위한 기술

Background 에서 실행되는 코드를 ‘ Worker’ 라고 불린다 .

UI(DOM) 과는 완전히 분리된 환경에서 동작 UI Thread 와 완전히 별도의 Thread 가 생성되어

동작

Web Woker 란 ?

Worker 를 이용한 병렬 처리 개념 1

출처 : http://dev.opera.com/articles/view/web-workers-rise-up/

Worker 를 이용한 병렬 처리 개념 2

DOM UI Thread

Workernew

postMessage()

postMessage()

UI 변경

Worker 로 DOM 을 조작할 수 없음

메시지를 통해 데이터를 주고

받음

DOM 조작 불가능 (it’s not thread-safe)◦ Window object 조작 불가능◦ Document object 조작 불가능◦ Parent object 조작 불가능

Page 의 script, functions, globals 조작 불가능◦ postMessage() 제외

Web Worker 제약

Object, Array, Date, Math, String 등의 Javascript 객체 사용

navigator object location object(read only) setTimeout()/clearTimeout()/setInterval()/clear-

Internal() XMLHttpRequest Application Cache

◦ http://www.html5rocks.com/tutorials/appcache/beginner/

importScripts() 를 이용하면 외부 script 임포트 (같은 도메인에 있는 script files 만 가능 )

Web Worker 에서 사용 가능한 것

긴 시간이 걸리는 스크립트◦ 매우 복잡한 수학적 계산작업◦ 원격지에 있는 소스에 대한 Access 작업 (WebSocket)◦ 로컬 스토리지 Access 작업◦ Background 에서 조용히 오랜시간 해야하는 작업◦ UI Thread 에 방해 없이 지속적으로 수행해야하는 작업

Web Worker 활용

//Web Worker 를 지원하는가 체크 function getWebWorkerSupport() { return (typeof(Worker) !== "undefined") ?

true : false;}

if (getWebWorkerSupport() ) { alert(“ 이 브라우져는 Web Worker 를 지원합니다” );} else { alert(“ 이 브라우져는 Web Worker 를 지원안해요 !”);}

Web Worker 지원 브라우저 체크

Web Worker 지원 브라우져(2011.05)

출처 : caniuse.com

참고 : 아이폰 사파리는 지원 안함

어떤 Javascript 파일이든 Worker 가 될 수 있다 .

Web Worker 사용법 1

그림출처 : http://wearehugh.com/public/2010/08/html5-web-workers/

Message 로 Worker 와 함께 통신할 수 있다 .

Web Worker 사용법 2

반대로 Worker 가 Message 를 보낼 수도 있다 .

Web Worker 사용법 3

postMessage() 의 인자는 어떤 type 이든 상관없다 . 이 인자는 JSON 으로 직렬화 처리 된다 .

Web Woker 사용법 4

http://jidolstar.net/study/html5/webworker/worker1.html

Worker 예제소스 및 실행

Worker◦ Worker 객체와 백그라운드 프로세스가 일대일로 대응하는

간단한 모델◦ var worker = new Worker(‘worker.js’);

SharedWorker◦ 여러개의 Worker 객체가 하나의 백그라운드 프로세스를

공유하는 모델◦ var worker1 = new SharedWorker(‘worker.js’,

‘wk’);◦ var worker2 = new SharedWorker(‘worker.js’,

‘wk’);

SharedWorker 에 대해

http://jidolstar.net/study/html5/webworker/sharedworker.html

SharedWorker 예제소스 및 실행

Web Worker Specification◦ http://www.whatwg.org/specs/web-workers/current-work/

The Basics of Web Workers◦ http://www.html5rocks.com/tutorials/workers/basics/

Using web worker◦ http://developer.mozilla.org/en/Using_web_workers

Web Worker rise up!◦ http://dev.opera.com/articles/view/web-workers-rise-up/

HTML5 Web Workers◦ http://www.tutorialspoint.com/html5/html5_web_workers.ht

m ( 동영상 )HTML5 Web Sockets, Web Workers and Ge-

olocation Unleashed◦ http://video.disruptivecode.com/video/840617/html5-web-so

ckets-web-workers

References

Juliamap ◦ http://juliamap.googlelabs.com

Motion Tracker◦ http://htmlfive.appspot.com/static/tracker1.html

Simulated Annealing ◦ http://people.mozilla.com/~prouget/demos/worker

_and_simulatedannealing/index.xhtml GeoJSON/WebWorker Example

◦ http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/geojson-webworker.html

Examples