HTML5 Web Workers

NHN NEXT 김우진

Web Worker는 Thread다.

Link : http://pmav.eu/stuff/javascript-webworkers/

THREAD

용도

긴 시간이 걸리는 스크립트

수식계산,

Serialization, Deserialization,

정렬,

Normalization,

등등

그래픽 작업UI는 그림만 그리고

복잡한 계산은 워커에게!

Example : Ray Tracing

Link : http://nerget.com/rayjs-mt/rayjs.html

미디어 작업

Motion Detection,

Image Filter,

Audio Analysis,

등등

Live Syntax Highlighting

public class Man {String name;Integer age;

public Man(String name, Integer age) {this.name = name;this.age = age;

}

public void know(String name, int age) {this.name = name;this.age = age;

}}

그 외

채팅구현,

Spell checker,

AJAX 요청,

WebSocket,

등등

졸라좋당.

사용법

Check Web Worker Support

// In UI Threadif(typeof(Worker) !== "undefined") { // Yes! Web worker support! // Some code…} else { // Sorry! No Web Worker support…}

Web Worker Support

Worker 만들기

// In UI Threadvar workerGary = new Worker("gary-in-IHU.js");

Worker를 일하게 하기

// In UI ThreadworkerGary.postMessage("Ride a skateboard");

참고 : postMessage의 인자는 어떤 type이든 JSON Object로 처리된다.

Worker 코드

// In Worker Thread - gary-in-IHU.jsonmessage = function(e) {

if(e.data === "Ride a skateboard") {rideSkateBoard();

};};

Worker 코드

// In Worker Thread - gary-in-IHU.jsfunction rideSkateBoard () {

doAli();doHeadSpin();doSometingDifficult();doSometingDangerous();postMessage("Let’s eat ramen");

};

결과를 가져오기

// In UI ThreadworkerGary.onmessage = function(e) {

// The message from the worker : if(e.data === "Let’s eat ramen") {

// Go to IHU and eat ramen…};

};

정리

Worker.postMessage(data);

Worker.onmessage() handler

self.onmessage() handler

self.postmessage(data);

UI Thread Worker Thread

참 쉽죠?

Helpful Tips

// In Worker Threadfunction callUi () {

postMessage({'cmd': methodName, 'args': args});};

// In UI Threadworker.onmessage = function(e) {

var fn = window[e.data.cmd];fn(e.data.args);

};

UI Thread의 함수 호출하기.

Helpful Tips

// In Worker Thread// logging from within the workerfunction log (obj) {

callUi({'cmd': 'console.log', 'args': obj});};

Worker Thread에서 로그 찍기.

Helpful Tips

<script id="worker1" type="javascript/worker">// Worker Thread

</script><script>

// UI Threadvar blob = new Blob([

document.querySelector('#worker1').textContent], { type: "text/javascript" });

var worker = new Worker(window.URL.createObjectURL(blob));// Working Hard

</script>

한 파일 안에서 워커 만들기.(Blob Object 이용)

for Chrome 8+, Firefox 6+, Safari 6.0+, Opera 15+

Import Scripts

// In Worker ThreadimportScript('workerUtil.js', 'jquery.hive.pollen.js');

Finishing Work

// In Worker Threadself.close();

or

// In UI Threadworker.terminate();

참고

할 수 없는 것

DOM 조작,

전역변수 사용,

jquery 사용,

debugger

할 수 있는 것Javascript 객체 사용,

Navigator Object 사용,

Location Object 사용(Read Only),

Ajax,

setTimeout, setInterval,

underscore.js 사용,

jquery.hive.pollen.js 사용

Shared Worker

Web Worker

1 : 1

Shared Worker

Many : Many

UI Thread : Worker Thread

Link : http://coolaj86.github.io/html5-shared-web-worker-examples/

Shared Worker

Shared Worker

Many : Many

portUI Thread

Shared Worker Thread

Shared Worker Thread

Shared Worker Thread

Shared Worker Thread

Shared Worker Thread

참고 : Shared Worker끼린 전역공간을 공유한다.

Shared Worker 만들기

// In UI Thread// SharedWorker(file, name)var sWorker = new SharedWorker("sWorker.js", "a");

Shared Worker 또 만들기

// In UI Thread// SharedWorker(file, name)var sWorker = new SharedWorker("sWorker.js", "a");var sWorker2 = new SharedWorker("sWorker.js", "a");// 같은 Javascript파일을 같은 name에 여러개 연결 할 수 있다.// 하나의 포트에 전역공간을 공유하는 worker 2개가 연결되었다.

주의사항

// 가능var sWorker = new SharedWorker("sWorker.js", "a");var sWorker2 = new SharedWorker("sWorker.js", "b");

// 불가능 : 같은 파일만 같은 name에 연결 할 수 있다.var sWorker = new SharedWorker("sWorker.js", "a");var sWorker2 = new SharedWorker("sWorker2.js", "a");

일하게 하기

// In UI ThreadsWorker.port.postMessage("Worker 1");sWorker2.port.postMessage("Worker 2");

Shared Worker 코드

// sWorker.jsvar global = 0;self.onconnect = function(e) {

global++;var port = e.ports[0];port.onmessage = function(e) {

port.postMessage(e.data + " " + global);};

};

결과를 가져오기

// In UI Threadvar messageHandler = function(e) {

console.log(e.data);};

sWorker.port.onMessage = messageHandler;sWorker2.port.onMessage = messageHandler;

결과는?

Shared Worker Example

Worker 1 : 2Worker 2 : 2

Shared Worker Support

복습

// In UI Threadvar worker = new Worker(“worker.js");worker.postMessageworker.onmessageworker.terminate

// In Worker Threadself.postMessageself.onmessageself.closeimportScript(…);

이제 직접 해볼까요?

미션1

워커에게 1초에 한번씩 숫자 세달라고 하기.http://jsbin.com/doxaveza/1/edit

결과

worker : 1worker : 2worker : 3worker : 4

.

.

.

미션2

워커와 한번씩 번갈아 가면서 숫자세기.

결과

worker : 1me : 2

worker : 3me : 4

.

.

.

Q & A

Reference

http://www.slideshare.net/humblefrog/getting-started-with-html-5-web-workers

https://developer.mozilla.org/ko/docs/Web/Guide/Performance/Using_web_workers

http://www.w3schools.com/html/html5_webworkers.asp

http://caniuse.com

http://www.htmlgoodies.com/html5/other/html5-tech-shared-web-workers-help-

spread-the-news.html#fbid=vbuGMC1zVWY