Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

HTML5의 web worker

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

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 />

×