SlideShare a Scribd company logo
1 of 43
Download to read offline
HTML5 
Web Workers 
NHN NEXT 김우진
Web Worker는 Thread다. 
Link : http://pmav.eu/stuff/javascript-webworkers/
Html5 web workers
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 Thread 
if(typeof(Worker) !== "undefined") { 
// Yes! Web worker support! 
// Some code… 
} else { 
// Sorry! No Web Worker support… 
}
Web Worker Support
Worker 만들기 
// In UI Thread 
var workerGary = new Worker("gary-in-IHU.js");
Worker를 일하게 하기 
// In UI Thread 
workerGary.postMessage("Ride a skateboard"); 
참고 : postMessage의 인자는 어떤 type이든 JSON Object로 처리된다.
Worker 코드 
// In Worker Thread - gary-in-IHU.js 
onmessage = function(e) { 
if(e.data === "Ride a skateboard") { 
rideSkateBoard(); 
}; 
};
Worker 코드 
// In Worker Thread - gary-in-IHU.js 
function rideSkateBoard () { 
doAli(); 
doHeadSpin(); 
doSometingDifficult(); 
doSometingDangerous(); 
postMessage("Let’s eat ramen"); 
};
결과를 가져오기 
// 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… 
}; 
};
정리 
UI Thread Worker Thread 
Worker.postMessage(data); 
Worker.onmessage() handler 
self.onmessage() handler 
self.postmessage(data); 
참 쉽죠?
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의 함수 호출하기.
Helpful Tips 
// In Worker Thread 
// logging from within the worker 
function log (obj) { 
callUi({'cmd': 'console.log', 'args': obj}); 
}; 
Worker Thread에서 로그 찍기.
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+
Import Scripts 
// In Worker Thread 
importScript('workerUtil.js', 'jquery.hive.pollen.js');
Finishing Work 
// In Worker Thread 
self.close(); 
or 
// In UI Thread 
worker.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 
UI Thread : Worker Thread 
Shared Worker 
Many : Many 
Link : http://coolaj86.github.io/html5-shared-web-worker-examples/
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끼린 전역공간을 공유한다.
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 Thread 
sWorker.port.postMessage("Worker 1"); 
sWorker2.port.postMessage("Worker 2");
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); 
}; 
};
결과를 가져오기 
// In UI Thread 
var messageHandler = function(e) { 
console.log(e.data); 
}; 
sWorker.port.onMessage = messageHandler; 
sWorker2.port.onMessage = messageHandler; 
결과는?
Shared Worker Example 
Worker 1 : 2 
Worker 2 : 2
Shared Worker Support
복습 
// 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(…);
이제 직접 해볼까요?
미션1 
워커에게 1초에 한번씩 숫자 세달라고 하기. 
http://jsbin.com/doxaveza/1/edit 
결과 
worker : 1 
worker : 2 
worker : 3 
worker : 4 
...
미션2 
워커와 한번씩 번갈아 가면서 숫자세기. 
결과 
worker : 1 
me : 2 
worker : 3 
me : 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

More Related Content

What's hot

Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&httpDong Jun Kwon
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivityJinKyoungHeo
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)연웅 조
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon
 
[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍NAVER D2
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는Taegon Kim
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brickyongwoo Jeon
 
[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅NAVER D2
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storageJinKyoungHeo
 
Node.js
Node.jsNode.js
Node.jsymtech
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!WooYoung Cho
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개Dong Jun Kwon
 
Leadweb Nodejs
Leadweb NodejsLeadweb Nodejs
Leadweb Nodejs근호 최
 
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Circulus
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVCArawn Park
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Appsjungkees
 
헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리은숙 이
 
Vuejs 시작하기
Vuejs 시작하기Vuejs 시작하기
Vuejs 시작하기성일 한
 

What's hot (20)

Node.js 심화과정
Node.js 심화과정Node.js 심화과정
Node.js 심화과정
 
Angular2 router&http
Angular2 router&httpAngular2 router&http
Angular2 router&http
 
5-5. html5 connectivity
5-5. html5 connectivity5-5. html5 connectivity
5-5. html5 connectivity
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)막하는 스터디 네 번째 만남 AngularJs (20151108)
막하는 스터디 네 번째 만남 AngularJs (20151108)
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
 
[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍[1B4]안드로이드 동시성_프로그래밍
[1B4]안드로이드 동시성_프로그래밍
 
ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는ReactJS | 서버와 클라이어트에서 동시에 사용하는
ReactJS | 서버와 클라이어트에서 동시에 사용하는
 
Web Components 101 polymer & brick
Web Components 101 polymer & brickWeb Components 101 polymer & brick
Web Components 101 polymer & brick
 
[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅[D2 오픈세미나]5.robolectric 안드로이드 테스팅
[D2 오픈세미나]5.robolectric 안드로이드 테스팅
 
5-4. html5 offline and storage
5-4. html5 offline and storage5-4. html5 offline and storage
5-4. html5 offline and storage
 
Node.js
Node.jsNode.js
Node.js
 
ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!ECMAScript 6의 새로운 것들!
ECMAScript 6의 새로운 것들!
 
Node.js 기본과정
Node.js 기본과정Node.js 기본과정
Node.js 기본과정
 
Angular2 가기전 Type script소개
 Angular2 가기전 Type script소개 Angular2 가기전 Type script소개
Angular2 가기전 Type script소개
 
Leadweb Nodejs
Leadweb NodejsLeadweb Nodejs
Leadweb Nodejs
 
Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신Startup JavaScript 9 - Socket.IO 실시간 통신
Startup JavaScript 9 - Socket.IO 실시간 통신
 
Resource Handling in Spring MVC
Resource Handling in Spring MVCResource Handling in Spring MVC
Resource Handling in Spring MVC
 
Progressive Web Apps
Progressive Web AppsProgressive Web Apps
Progressive Web Apps
 
헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리헷갈리는 자바스크립트 정리
헷갈리는 자바스크립트 정리
 
Vuejs 시작하기
Vuejs 시작하기Vuejs 시작하기
Vuejs 시작하기
 

Similar to Html5 web workers

Express framework tutorial
Express framework tutorialExpress framework tutorial
Express framework tutorial우림 류
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용Jin wook
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기현철 조
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나JeongHun Byeon
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기John Kim
 
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable FunctionsJongin Lee
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용중선 곽
 
개발자의 컴퓨터
개발자의 컴퓨터개발자의 컴퓨터
개발자의 컴퓨터jaehyok Song
 
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 TestOkjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 Testbeom kyun choi
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSCirculus
 
20131217 html5
20131217 html520131217 html5
20131217 html5DK Lee
 
Jdk(java) 7 - 5. invoke-dynamic
Jdk(java) 7 - 5. invoke-dynamicJdk(java) 7 - 5. invoke-dynamic
Jdk(java) 7 - 5. invoke-dynamicknight1128
 
Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기jongho jeong
 
JavaScript Debugging (수업자료)
JavaScript Debugging (수업자료)JavaScript Debugging (수업자료)
JavaScript Debugging (수업자료)지수 윤
 
Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822병헌 정
 

Similar to Html5 web workers (20)

Express framework tutorial
Express framework tutorialExpress framework tutorial
Express framework tutorial
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나Front-end Development Process - 어디까지 개선할 수 있나
Front-end Development Process - 어디까지 개선할 수 있나
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기NODE.JS 글로벌 기업 적용 사례  그리고, real-time 어플리케이션 개발하기
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
 
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
코드로 바로 해버리는 서버리스 오케스트레이션 - Azure Durable Functions
 
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
프로그래밍 패러다임의 진화 및 Spring의 금융권 적용
 
개발자의 컴퓨터
개발자의 컴퓨터개발자의 컴퓨터
개발자의 컴퓨터
 
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 TestOkjsp 13주년 발표자료: 생존 프로그래밍 Test
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
 
테스트
테스트테스트
테스트
 
Spring Boot 2
Spring Boot 2Spring Boot 2
Spring Boot 2
 
Startup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JSStartup JavaScript 8 - NPM, Express.JS
Startup JavaScript 8 - NPM, Express.JS
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
Jdk(java) 7 - 5. invoke-dynamic
Jdk(java) 7 - 5. invoke-dynamicJdk(java) 7 - 5. invoke-dynamic
Jdk(java) 7 - 5. invoke-dynamic
 
Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기Javascript 조금 더 잘 알기
Javascript 조금 더 잘 알기
 
JavaScript Debugging (수업자료)
JavaScript Debugging (수업자료)JavaScript Debugging (수업자료)
JavaScript Debugging (수업자료)
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822Node js[stg]onimusha 20140822
Node js[stg]onimusha 20140822
 
Html5
Html5 Html5
Html5
 

More from Woo Jin Kim

Berry - Honghap Valley DEMO Day Presentation
Berry - Honghap Valley DEMO Day PresentationBerry - Honghap Valley DEMO Day Presentation
Berry - Honghap Valley DEMO Day PresentationWoo Jin Kim
 
Berry business plan
Berry business planBerry business plan
Berry business planWoo Jin Kim
 
berry business plan
berry business planberry business plan
berry business planWoo Jin Kim
 
Fast render 톺아보기
Fast render 톺아보기Fast render 톺아보기
Fast render 톺아보기Woo Jin Kim
 
Command pattern 김우진
Command pattern 김우진Command pattern 김우진
Command pattern 김우진Woo Jin Kim
 
Git branch stregagy & case study
Git branch stregagy & case studyGit branch stregagy & case study
Git branch stregagy & case studyWoo Jin Kim
 

More from Woo Jin Kim (7)

Berry - Honghap Valley DEMO Day Presentation
Berry - Honghap Valley DEMO Day PresentationBerry - Honghap Valley DEMO Day Presentation
Berry - Honghap Valley DEMO Day Presentation
 
Berry business plan
Berry business planBerry business plan
Berry business plan
 
berry business plan
berry business planberry business plan
berry business plan
 
Fast render 톺아보기
Fast render 톺아보기Fast render 톺아보기
Fast render 톺아보기
 
Command pattern 김우진
Command pattern 김우진Command pattern 김우진
Command pattern 김우진
 
Memento pattern
Memento patternMemento pattern
Memento pattern
 
Git branch stregagy & case study
Git branch stregagy & case studyGit branch stregagy & case study
Git branch stregagy & case study
 

Html5 web workers

  • 1. HTML5 Web Workers NHN NEXT 김우진
  • 2. Web Worker는 Thread다. Link : http://pmav.eu/stuff/javascript-webworkers/
  • 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, 등등 졸라좋당.
  • 12. Check Web Worker Support // In UI Thread if(typeof(Worker) !== "undefined") { // Yes! Web worker support! // Some code… } else { // Sorry! No 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();
  • 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
  • 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(…);
  • 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