HTML5의 web worker

Javascript코드를 background에서 실행시키기 위한 기술 Background에서 실행되는 코드를 ‘Worker’라고 불린다. UI(DOM)과는 완전히 분리된 환경에서 동작 ,[object Object],Web Woker란?

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

Worker를 이용한 병렬 처리 개념 2 DOM UI Thread Worker new UI 변경 postMessage() postMessage() 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()/clearInternal() 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.htm (동영상)HTML5 Web Sockets, Web Workers and Geolocation Unleashed http://video.disruptivecode.com/video/840617/html5-web-sockets-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

HTML5의 web worker

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie HTML5의 web worker

Ähnlich wie HTML5의 web worker (20)

HTML5의 web worker