HTML5의 web worker

  • 7,984 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
7,984
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
87
Comments
0
Likes
10

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML5의 Web Worker
    YonghoJi
  • 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를 이용한 병렬 처리 개념 2
    DOM
    UI Thread
    Worker
    new
    UI 변경
    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 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에서 사용 가능한 것
  • 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.html
    Worker 예제소스 및 실행
  • 15. 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에 대해
  • 16. http://jidolstar.net/study/html5/webworker/sharedworker.html
    SharedWorker예제소스 및 실행
  • 17. 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
  • 18. 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