HTML5의 web worker

10,538 views

Published on

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

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
10,538
On SlideShare
0
From Embeds
0
Number of Embeds
459
Actions
Shares
0
Downloads
115
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

HTML5의 web worker

  1. 1. HTML5의 Web Worker<br />YonghoJi<br />
  2. 2. Javascript코드를 background에서 실행시키기 위한 기술<br />Background에서 실행되는 코드를 ‘Worker’라고 불린다.<br />UI(DOM)과는 완전히 분리된 환경에서 동작<br /><ul><li>UI Thread와 완전히 별도의 Thread가 생성되어 동작</li></ul>Web Woker란?<br />
  3. 3. Worker를 이용한 병렬 처리 개념 1<br />출처 : http://dev.opera.com/articles/view/web-workers-rise-up/<br />
  4. 4. Worker를 이용한 병렬 처리 개념 2<br />DOM<br />UI Thread<br />Worker<br />new<br />UI 변경<br />postMessage()<br />postMessage()<br />Worker로 DOM을 조작할 수 없음<br />메시지를 통해 데이터를 주고 받음<br />
  5. 5. DOM 조작 불가능 (it’s not thread-safe)<br />Window object 조작 불가능<br />Document object 조작 불가능<br />Parent object 조작 불가능<br />Page의 script, functions, globals조작 불가능<br />postMessage() 제외<br />Web Worker 제약<br />
  6. 6. Object, Array, Date, Math, String 등의 Javascript객체 사용<br />navigator object<br />location object(read only)<br />setTimeout()/clearTimeout()/setInterval()/clearInternal()<br />XMLHttpRequest<br />Application Cache<br />http://www.html5rocks.com/tutorials/appcache/beginner/<br />importScripts() 를 이용하면 외부 script 임포트(같은 도메인에 있는 script files만 가능)<br />Web Worker에서 사용 가능한 것<br />
  7. 7. 긴 시간이 걸리는 스크립트<br />매우 복잡한 수학적 계산작업<br />원격지에 있는 소스에 대한 Access 작업 (WebSocket)<br />로컬 스토리지 Access 작업<br />Background에서 조용히 오랜시간 해야하는 작업<br />UI Thread에 방해 없이 지속적으로 수행해야하는 작업<br />Web Worker 활용<br />
  8. 8. //Web Worker를 지원하는가 체크 <br />function getWebWorkerSupport() {<br /> return (typeof(Worker) !== "undefined") ? true : false;<br />}<br />if (getWebWorkerSupport() ) {<br /> alert(“이 브라우져는 Web Worker를 지원합니다”);<br />} else {<br /> alert(“이 브라우져는 Web Worker를 지원안해요!”);<br />}<br />Web Worker 지원 브라우저 체크<br />
  9. 9. Web Worker 지원 브라우져(2011.05)<br />출처 : caniuse.com<br />참고 : 아이폰 사파리는 지원 안함<br />
  10. 10. 어떤 Javascript파일이든 Worker가 될 수 있다.<br />Web Worker 사용법 1<br />그림출처 : http://wearehugh.com/public/2010/08/html5-web-workers/<br />
  11. 11. Message로 Worker와 함께 통신할 수 있다.<br />Web Worker 사용법 2<br />
  12. 12. 반대로 Worker가 Message를 보낼 수도 있다.<br />Web Worker 사용법 3<br />
  13. 13. postMessage()의 인자는 어떤 type이든 상관없다. 이 인자는 JSON으로 직렬화 처리 된다.<br />Web Woker사용법 4<br />
  14. 14. http://jidolstar.net/study/html5/webworker/worker1.html<br />Worker 예제소스 및 실행<br />
  15. 15. Worker<br />Worker 객체와 백그라운드 프로세스가 일대일로 대응하는 간단한 모델<br />var worker = new Worker(‘worker.js’);<br />SharedWorker<br />여러개의 Worker 객체가 하나의 백그라운드 프로세스를 공유하는 모델<br />var worker1 = new SharedWorker(‘worker.js’, ‘wk’);<br />var worker2 = new SharedWorker(‘worker.js’, ‘wk’);<br />SharedWorker에 대해<br />
  16. 16. http://jidolstar.net/study/html5/webworker/sharedworker.html<br />SharedWorker예제소스 및 실행<br />
  17. 17. Web Worker Specification<br />http://www.whatwg.org/specs/web-workers/current-work/<br />The Basics of Web Workers<br />http://www.html5rocks.com/tutorials/workers/basics/ <br />Using web worker<br />http://developer.mozilla.org/en/Using_web_workers<br />Web Worker rise up!<br />http://dev.opera.com/articles/view/web-workers-rise-up/<br />HTML5 Web Workers<br />http://www.tutorialspoint.com/html5/html5_web_workers.htm<br />(동영상)HTML5 Web Sockets, Web Workers and Geolocation Unleashed<br />http://video.disruptivecode.com/video/840617/html5-web-sockets-web-workers<br />References<br />
  18. 18. Juliamap<br />http://juliamap.googlelabs.com<br />Motion Tracker<br />http://htmlfive.appspot.com/static/tracker1.html<br />Simulated Annealing <br />http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml<br />GeoJSON/WebWorker Example<br />http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/geojson-webworker.html<br />Examples<br />

×