HTML5의 Web Worker에 대해 정리해본 자료입니다. 사내 스터디용으로 제작했습니다.

1. HTML5의 Web WorkerYonghoJi

2. Javascript코드를 background에서 실행시키기 위한 기술Background에서 실행되는 코드를 ‘Worker’라고 불린다.UI(DOM)과는 완전히 분리된 환경에서 동작UI Thread와 완전히 별도의 Thread가 생성되어 동작Web Woker란?

3. Worker를 이용한 병렬 처리 개념 1출처 : http://dev.opera.com/articles/view/web-workers-rise-up/

4. Worker를 이용한 병렬 처리 개념 2DOMUI ThreadWorkernewUI 변경postMessage()postMessage()Worker로 DOM을 조작할 수 없음메시지를 통해 데이터를 주고 받음

5. DOM 조작 불가능 (it’s not thread-safe)Window object 조작 불가능Document object 조작 불가능Parent object 조작 불가능Page의 script, functions, globals조작 불가능postMessage() 제외Web Worker 제약

6. Object, Array, Date, Math, String 등의 Javascript객체 사용navigator objectlocation object(read only)setTimeout()/clearTimeout()/setInterval()/clearInternal()XMLHttpRequestApplication Cachehttp://www.html5rocks.com/tutorials/appcache/beginner/importScripts() 를 이용하면 외부 script 임포트(같은 도메인에 있는 script files만 가능)Web Worker에서 사용 가능한 것

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

8. //Web Worker를 지원하는가 체크 function getWebWorkerSupport() { return (typeof(Worker) !== "undefined") ? true : false;}if (getWebWorkerSupport() ) { alert(“이 브라우져는 Web Worker를 지원합니다”);} else { alert(“이 브라우져는 Web Worker를 지원안해요!”);}Web Worker 지원 브라우저 체크

9. Web Worker 지원 브라우져(2011.05)출처 : caniuse.com참고 : 아이폰 사파리는 지원 안함

10. 어떤 Javascript파일이든 Worker가 될 수 있다.Web Worker 사용법 1그림출처 : http://wearehugh.com/public/2010/08/html5-web-workers/

11. Message로 Worker와 함께 통신할 수 있다.Web Worker 사용법 2

12. 반대로 Worker가 Message를 보낼 수도 있다.Web Worker 사용법 3

13. postMessage()의 인자는 어떤 type이든 상관없다. 이 인자는 JSON으로 직렬화 처리 된다.Web Woker사용법 4

14. http://jidolstar.net/study/html5/webworker/worker1.htmlWorker 예제소스 및 실행

15. WorkerWorker 객체와 백그라운드 프로세스가 일대일로 대응하는 간단한 모델var worker = new Worker(‘worker.js’);SharedWorker여러개의 Worker 객체가 하나의 백그라운드 프로세스를 공유하는 모델var worker1 = new SharedWorker(‘worker.js’, ‘wk’);var worker2 = new SharedWorker(‘worker.js’, ‘wk’);SharedWorker에 대해

16. http://jidolstar.net/study/html5/webworker/sharedworker.htmlSharedWorker예제소스 및 실행

17. Web Worker Specificationhttp://www.whatwg.org/specs/web-workers/current-work/The Basics of Web Workershttp://www.html5rocks.com/tutorials/workers/basics/ Using web workerhttp://developer.mozilla.org/en/Using_web_workersWeb Worker rise up!http://dev.opera.com/articles/view/web-workers-rise-up/HTML5 Web Workershttp://www.tutorialspoint.com/html5/html5_web_workers.htm(동영상)HTML5 Web Sockets, Web Workers and Geolocation Unleashedhttp://video.disruptivecode.com/video/840617/html5-web-sockets-web-workersReferences

18. Juliamaphttp://juliamap.googlelabs.comMotion Trackerhttp://htmlfive.appspot.com/static/tracker1.htmlSimulated Annealing http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtmlGeoJSON/WebWorker Examplehttp://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/geojson-webworker.htmlExamples