HTML5 Web Workers 발표자료 입니다.

1. HTML5
Web Workers
NHN NEXT 김우진

2. Web Worker는 Thread다.
Link : http://pmav.eu/stuff/javascript-webworkers/

4. THREAD

5. 용도

6. 긴 시간이 걸리는 스크립트
수식계산,
Serialization, Deserialization,
정렬,
Normalization,
등등

7. 그래픽 작업
UI는 그림만 그리고
복잡한 계산은 워커에게!
Example : Ray Tracing
Link : http://nerget.com/rayjs-mt/rayjs.html

8. 미디어 작업
Motion Detection,
Image Filter,
Audio Analysis,
등등

9. 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;
}
}

10. 그 외
채팅구현,
Spell checker,
AJAX 요청,
WebSocket,
등등
졸라좋당.

11. 사용법

12. Check Web Worker Support
// In UI Thread
if(typeof(Worker) !== "undefined") {
// Yes! Web worker support!
// Some code…
} else {
// Sorry! No Web Worker support…
}

13. Web Worker Support

14. Worker 만들기
// In UI Thread
var workerGary = new Worker("gary-in-IHU.js");

15. Worker를 일하게 하기
// In UI Thread
workerGary.postMessage("Ride a skateboard");
참고 : postMessage의 인자는 어떤 type이든 JSON Object로 처리된다.

16. Worker 코드
// In Worker Thread - gary-in-IHU.js
onmessage = function(e) {
if(e.data === "Ride a skateboard") {
rideSkateBoard();
};
};

17. Worker 코드
// In Worker Thread - gary-in-IHU.js
function rideSkateBoard () {
doAli();
doHeadSpin();
doSometingDifficult();
doSometingDangerous();
postMessage("Let’s eat ramen");
};

18. 결과를 가져오기
// In UI Thread
workerGary.onmessage = function(e) {
// The message from the worker :
if(e.data === "Let’s eat ramen") {
// Go to IHU and eat ramen…
};
};

19. 정리
UI Thread Worker Thread
Worker.postMessage(data);
Worker.onmessage() handler
self.onmessage() handler
self.postmessage(data);
참 쉽죠?

20. Helpful Tips
// In Worker Thread
function callUi () {
postMessage({'cmd': methodName, 'args': args});
};
// In UI Thread
worker.onmessage = function(e) {
var fn = window[e.data.cmd];
fn(e.data.args);
};
UI Thread의 함수 호출하기.

21. Helpful Tips
// In Worker Thread
// logging from within the worker
function log (obj) {
callUi({'cmd': 'console.log', 'args': obj});
};
Worker Thread에서 로그 찍기.

22. Helpful Tips
<script id="worker1" type="javascript/worker">
// Worker Thread
</script>
<script>
// UI Thread
var 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+

23. Import Scripts
// In Worker Thread
importScript('workerUtil.js', 'jquery.hive.pollen.js');

24. Finishing Work
// In Worker Thread
self.close();
or
// In UI Thread
worker.terminate();

25. 참고

26. 할 수 없는 것
DOM 조작,
전역변수 사용,
jquery 사용,
debugger

27. 할 수 있는 것
Javascript 객체 사용,
Navigator Object 사용,
Location Object 사용(Read Only),
Ajax,
setTimeout, setInterval,
underscore.js 사용,
jquery.hive.pollen.js 사용

28. Shared Worker
Web Worker
1 : 1
UI Thread : Worker Thread
Shared Worker
Many : Many
Link : http://coolaj86.github.io/html5-shared-web-worker-examples/

29. Shared Worker
UI Thread port
Shared Worker
Many : Many
Shared Worker Thread
Shared Worker Thread
Shared Worker Thread
Shared Worker Thread
Shared Worker Thread
참고 : Shared Worker끼린 전역공간을 공유한다.

30. Shared Worker 만들기
// In UI Thread
// SharedWorker(file, name)
var sWorker = new SharedWorker("sWorker.js", "a");

31. 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개가 연결되었다.

32. 주의사항
// 가능
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");

33. 일하게 하기
// In UI Thread
sWorker.port.postMessage("Worker 1");
sWorker2.port.postMessage("Worker 2");

34. Shared Worker 코드
// sWorker.js
var global = 0;
self.onconnect = function(e) {
global++;
var port = e.ports[0];
port.onmessage = function(e) {
port.postMessage(e.data + " " + global);
};
};

35. 결과를 가져오기
// In UI Thread
var messageHandler = function(e) {
console.log(e.data);
};
sWorker.port.onMessage = messageHandler;
sWorker2.port.onMessage = messageHandler;
결과는?

36. Shared Worker Example
Worker 1 : 2
Worker 2 : 2

37. Shared Worker Support

38. 복습
// In UI Thread
var worker = new Worker(“worker.js");
worker.postMessage
worker.onmessage
worker.terminate
// In Worker Thread
self.postMessage
self.onmessage
self.close
importScript(…);

39. 이제 직접 해볼까요?

40. 미션1
워커에게 1초에 한번씩 숫자 세달라고 하기.
http://jsbin.com/doxaveza/1/edit
결과
worker : 1
worker : 2
worker : 3
worker : 4
...

41. 미션2
워커와 한번씩 번갈아 가면서 숫자세기.
결과
worker : 1
me : 2
worker : 3
me : 4
...

42. Q & A

43. 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