HTML5의 web worker
-
Upload
yongho-ji -
Category
Technology
-
view
8.448 -
download
11
description
Transcript of HTML5의 web worker
![Page 1: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/1.jpg)
HTML5 의 Web WorkerYongho Ji
![Page 2: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/2.jpg)
Javascript 코드를 background 에서 실행시키기 위한 기술
Background 에서 실행되는 코드를 ‘ Worker’ 라고 불린다 .
UI(DOM) 과는 완전히 분리된 환경에서 동작 UI Thread 와 완전히 별도의 Thread 가 생성되어
동작
Web Woker 란 ?
![Page 3: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/3.jpg)
Worker 를 이용한 병렬 처리 개념 1
출처 : http://dev.opera.com/articles/view/web-workers-rise-up/
![Page 4: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/4.jpg)
Worker 를 이용한 병렬 처리 개념 2
DOM UI Thread
Workernew
postMessage()
postMessage()
UI 변경
Worker 로 DOM 을 조작할 수 없음
메시지를 통해 데이터를 주고
받음
![Page 5: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/5.jpg)
DOM 조작 불가능 (it’s not thread-safe)◦ Window object 조작 불가능◦ Document object 조작 불가능◦ Parent object 조작 불가능
Page 의 script, functions, globals 조작 불가능◦ postMessage() 제외
Web Worker 제약
![Page 6: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/6.jpg)
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 에서 사용 가능한 것
![Page 7: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/7.jpg)
긴 시간이 걸리는 스크립트◦ 매우 복잡한 수학적 계산작업◦ 원격지에 있는 소스에 대한 Access 작업 (WebSocket)◦ 로컬 스토리지 Access 작업◦ Background 에서 조용히 오랜시간 해야하는 작업◦ UI Thread 에 방해 없이 지속적으로 수행해야하는 작업
Web Worker 활용
![Page 8: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/8.jpg)
//Web Worker 를 지원하는가 체크 function getWebWorkerSupport() { return (typeof(Worker) !== "undefined") ?
true : false;}
if (getWebWorkerSupport() ) { alert(“ 이 브라우져는 Web Worker 를 지원합니다” );} else { alert(“ 이 브라우져는 Web Worker 를 지원안해요 !”);}
Web Worker 지원 브라우저 체크
![Page 9: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/9.jpg)
Web Worker 지원 브라우져(2011.05)
출처 : caniuse.com
참고 : 아이폰 사파리는 지원 안함
![Page 10: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/10.jpg)
어떤 Javascript 파일이든 Worker 가 될 수 있다 .
Web Worker 사용법 1
그림출처 : http://wearehugh.com/public/2010/08/html5-web-workers/
![Page 11: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/11.jpg)
Message 로 Worker 와 함께 통신할 수 있다 .
Web Worker 사용법 2
![Page 12: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/12.jpg)
반대로 Worker 가 Message 를 보낼 수도 있다 .
Web Worker 사용법 3
![Page 13: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/13.jpg)
postMessage() 의 인자는 어떤 type 이든 상관없다 . 이 인자는 JSON 으로 직렬화 처리 된다 .
Web Woker 사용법 4
![Page 14: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/14.jpg)
http://jidolstar.net/study/html5/webworker/worker1.html
Worker 예제소스 및 실행
![Page 15: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/15.jpg)
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 에 대해
![Page 16: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/16.jpg)
http://jidolstar.net/study/html5/webworker/sharedworker.html
SharedWorker 예제소스 및 실행
![Page 17: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/17.jpg)
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
![Page 18: HTML5의 web worker](https://reader036.fdocument.pub/reader036/viewer/2022062319/5560bf85d8b42afe3b8b53db/html5/thumbnails/18.jpg)
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