Download - Html5 web workers
![Page 1: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/1.jpg)
HTML5 Web Workers
NHN NEXT 김우진
![Page 2: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/2.jpg)
Web Worker는 Thread다.
Link : http://pmav.eu/stuff/javascript-webworkers/
![Page 3: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/3.jpg)
![Page 4: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/4.jpg)
THREAD
![Page 5: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/5.jpg)
용도
![Page 6: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/6.jpg)
긴 시간이 걸리는 스크립트
수식계산,
Serialization, Deserialization,
정렬,
Normalization,
등등
![Page 7: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/7.jpg)
그래픽 작업UI는 그림만 그리고
복잡한 계산은 워커에게!
Example : Ray Tracing
Link : http://nerget.com/rayjs-mt/rayjs.html
![Page 8: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/8.jpg)
미디어 작업
Motion Detection,
Image Filter,
Audio Analysis,
등등
![Page 9: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/9.jpg)
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;
}}
![Page 10: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/10.jpg)
그 외
채팅구현,
Spell checker,
AJAX 요청,
WebSocket,
등등
졸라좋당.
![Page 11: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/11.jpg)
사용법
![Page 12: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/12.jpg)
Check Web Worker Support
// In UI Threadif(typeof(Worker) !== "undefined") { // Yes! Web worker support! // Some code…} else { // Sorry! No Web Worker support…}
![Page 13: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/13.jpg)
Web Worker Support
![Page 14: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/14.jpg)
Worker 만들기
// In UI Threadvar workerGary = new Worker("gary-in-IHU.js");
![Page 15: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/15.jpg)
Worker를 일하게 하기
// In UI ThreadworkerGary.postMessage("Ride a skateboard");
참고 : postMessage의 인자는 어떤 type이든 JSON Object로 처리된다.
![Page 16: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/16.jpg)
Worker 코드
// In Worker Thread - gary-in-IHU.jsonmessage = function(e) {
if(e.data === "Ride a skateboard") {rideSkateBoard();
};};
![Page 17: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/17.jpg)
Worker 코드
// In Worker Thread - gary-in-IHU.jsfunction rideSkateBoard () {
doAli();doHeadSpin();doSometingDifficult();doSometingDangerous();postMessage("Let’s eat ramen");
};
![Page 18: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/18.jpg)
결과를 가져오기
// In UI ThreadworkerGary.onmessage = function(e) {
// The message from the worker : if(e.data === "Let’s eat ramen") {
// Go to IHU and eat ramen…};
};
![Page 19: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/19.jpg)
정리
Worker.postMessage(data);
Worker.onmessage() handler
self.onmessage() handler
self.postmessage(data);
UI Thread Worker Thread
참 쉽죠?
![Page 20: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/20.jpg)
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의 함수 호출하기.
![Page 21: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/21.jpg)
Helpful Tips
// In Worker Thread// logging from within the workerfunction log (obj) {
callUi({'cmd': 'console.log', 'args': obj});};
Worker Thread에서 로그 찍기.
![Page 22: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/22.jpg)
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+
![Page 23: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/23.jpg)
Import Scripts
// In Worker ThreadimportScript('workerUtil.js', 'jquery.hive.pollen.js');
![Page 24: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/24.jpg)
Finishing Work
// In Worker Threadself.close();
or
// In UI Threadworker.terminate();
![Page 25: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/25.jpg)
참고
![Page 26: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/26.jpg)
할 수 없는 것
DOM 조작,
전역변수 사용,
jquery 사용,
debugger
![Page 27: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/27.jpg)
할 수 있는 것Javascript 객체 사용,
Navigator Object 사용,
Location Object 사용(Read Only),
Ajax,
setTimeout, setInterval,
underscore.js 사용,
jquery.hive.pollen.js 사용
![Page 28: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/28.jpg)
Shared Worker
Web Worker
1 : 1
Shared Worker
Many : Many
UI Thread : Worker Thread
Link : http://coolaj86.github.io/html5-shared-web-worker-examples/
![Page 29: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/29.jpg)
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끼린 전역공간을 공유한다.
![Page 30: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/30.jpg)
Shared Worker 만들기
// In UI Thread// SharedWorker(file, name)var sWorker = new SharedWorker("sWorker.js", "a");
![Page 31: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/31.jpg)
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개가 연결되었다.
![Page 32: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/32.jpg)
주의사항
// 가능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");
![Page 33: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/33.jpg)
일하게 하기
// In UI ThreadsWorker.port.postMessage("Worker 1");sWorker2.port.postMessage("Worker 2");
![Page 34: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/34.jpg)
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);};
};
![Page 35: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/35.jpg)
결과를 가져오기
// In UI Threadvar messageHandler = function(e) {
console.log(e.data);};
sWorker.port.onMessage = messageHandler;sWorker2.port.onMessage = messageHandler;
결과는?
![Page 36: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/36.jpg)
Shared Worker Example
Worker 1 : 2Worker 2 : 2
![Page 37: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/37.jpg)
Shared Worker Support
![Page 38: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/38.jpg)
복습
// In UI Threadvar worker = new Worker(“worker.js");worker.postMessageworker.onmessageworker.terminate
// In Worker Threadself.postMessageself.onmessageself.closeimportScript(…);
![Page 39: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/39.jpg)
이제 직접 해볼까요?
![Page 40: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/40.jpg)
미션1
워커에게 1초에 한번씩 숫자 세달라고 하기.http://jsbin.com/doxaveza/1/edit
결과
worker : 1worker : 2worker : 3worker : 4
.
.
.
![Page 41: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/41.jpg)
미션2
워커와 한번씩 번갈아 가면서 숫자세기.
결과
worker : 1me : 2
worker : 3me : 4
.
.
.
![Page 42: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/42.jpg)
Q & A
![Page 43: Html5 web workers](https://reader034.vdocuments.site/reader034/viewer/2022042715/5594147b1a28ab872b8b4634/html5/thumbnails/43.jpg)
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