SlideShare a Scribd company logo
1 of 18
Download to read offline
HTML5의 Web Worker,[object Object],YonghoJi,[object Object]
Javascript코드를 background에서 실행시키기 위한 기술,[object Object],Background에서 실행되는 코드를 ‘Worker’라고 불린다.,[object Object],UI(DOM)과는 완전히 분리된 환경에서 동작,[object Object],[object Object],Web Woker란?,[object Object]
Worker를 이용한 병렬 처리 개념 1,[object Object],출처 : http://dev.opera.com/articles/view/web-workers-rise-up/,[object Object]
Worker를 이용한 병렬 처리 개념 2,[object Object],DOM,[object Object],UI Thread,[object Object],Worker,[object Object],new,[object Object],UI 변경,[object Object],postMessage(),[object Object],postMessage(),[object Object],Worker로 DOM을 조작할 수 없음,[object Object],메시지를 통해 데이터를 주고 받음,[object Object]
DOM 조작 불가능 (it’s not thread-safe),[object Object],Window object 조작 불가능,[object Object],Document object 조작 불가능,[object Object],Parent object 조작 불가능,[object Object],Page의 script, functions, globals조작 불가능,[object Object],postMessage() 제외,[object Object],Web Worker 제약,[object Object]
Object, Array, Date, Math, String 등의 Javascript객체 사용,[object Object],navigator object,[object Object],location object(read only),[object Object],setTimeout()/clearTimeout()/setInterval()/clearInternal(),[object Object],XMLHttpRequest,[object Object],Application Cache,[object Object],http://www.html5rocks.com/tutorials/appcache/beginner/,[object Object],importScripts() 를 이용하면 외부 script 임포트(같은 도메인에 있는 script files만 가능),[object Object],Web Worker에서 사용 가능한 것,[object Object]
긴 시간이 걸리는 스크립트,[object Object],매우 복잡한 수학적 계산작업,[object Object],원격지에 있는 소스에 대한 Access 작업 (WebSocket),[object Object],로컬 스토리지 Access 작업,[object Object],Background에서 조용히 오랜시간 해야하는 작업,[object Object],UI Thread에 방해 없이 지속적으로 수행해야하는 작업,[object Object],Web Worker 활용,[object Object]
//Web Worker를 지원하는가 체크 ,[object Object],function getWebWorkerSupport() {,[object Object],   return (typeof(Worker) !== "undefined") ? true : false;,[object Object],},[object Object],if (getWebWorkerSupport() ) {,[object Object],    alert(“이 브라우져는 Web Worker를 지원합니다”);,[object Object],} else {,[object Object],    alert(“이 브라우져는 Web Worker를 지원안해요!”);,[object Object],},[object Object],Web Worker 지원 브라우저 체크,[object Object]
Web Worker 지원 브라우져(2011.05),[object Object],출처 : caniuse.com,[object Object],참고 : 아이폰 사파리는 지원 안함,[object Object]
어떤 Javascript파일이든 Worker가 될 수 있다.,[object Object],Web Worker 사용법 1,[object Object],그림출처 : http://wearehugh.com/public/2010/08/html5-web-workers/,[object Object]
Message로 Worker와 함께 통신할 수 있다.,[object Object],Web Worker 사용법 2,[object Object]
반대로 Worker가 Message를 보낼 수도 있다.,[object Object],Web Worker 사용법 3,[object Object]
postMessage()의 인자는 어떤 type이든 상관없다. 이 인자는 JSON으로 직렬화 처리 된다.,[object Object],Web Woker사용법 4,[object Object]
http://jidolstar.net/study/html5/webworker/worker1.html,[object Object],Worker 예제소스 및 실행,[object Object]
Worker,[object Object],Worker 객체와 백그라운드 프로세스가 일대일로 대응하는 간단한 모델,[object Object],var worker = new Worker(‘worker.js’);,[object Object],SharedWorker,[object Object],여러개의 Worker 객체가 하나의 백그라운드 프로세스를 공유하는 모델,[object Object],var worker1 = new SharedWorker(‘worker.js’, ‘wk’);,[object Object],var worker2 = new SharedWorker(‘worker.js’, ‘wk’);,[object Object],SharedWorker에 대해,[object Object]
http://jidolstar.net/study/html5/webworker/sharedworker.html,[object Object],SharedWorker예제소스 및 실행,[object Object]
Web Worker Specification,[object Object],http://www.whatwg.org/specs/web-workers/current-work/,[object Object],The Basics of Web Workers,[object Object],http://www.html5rocks.com/tutorials/workers/basics/ ,[object Object],Using web worker,[object Object],http://developer.mozilla.org/en/Using_web_workers,[object Object],Web Worker rise up!,[object Object],http://dev.opera.com/articles/view/web-workers-rise-up/,[object Object],HTML5 Web Workers,[object Object],http://www.tutorialspoint.com/html5/html5_web_workers.htm,[object Object],(동영상)HTML5 Web Sockets, Web Workers and Geolocation Unleashed,[object Object],http://video.disruptivecode.com/video/840617/html5-web-sockets-web-workers,[object Object],References,[object Object]
Juliamap,[object Object],http://juliamap.googlelabs.com,[object Object],Motion Tracker,[object Object],http://htmlfive.appspot.com/static/tracker1.html,[object Object],Simulated Annealing ,[object Object],http://people.mozilla.com/~prouget/demos/worker_and_simulatedannealing/index.xhtml,[object Object],GeoJSON/WebWorker Example,[object Object],http://dev.openlayers.org/sandbox/camptocamp/canvas/openlayers/examples/geojson-webworker.html,[object Object],Examples,[object Object]

More Related Content

What's hot

Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.jsRob O'Doherty
 
Nodejs Explained with Examples
Nodejs Explained with ExamplesNodejs Explained with Examples
Nodejs Explained with ExamplesGabriele Lana
 
Netty 세미나
Netty 세미나Netty 세미나
Netty 세미나Jang Hoon
 
React Router: React Meetup XXL
React Router: React Meetup XXLReact Router: React Meetup XXL
React Router: React Meetup XXLRob Gietema
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node jsAkshay Mathur
 
Project Reactor Now and Tomorrow
Project Reactor Now and TomorrowProject Reactor Now and Tomorrow
Project Reactor Now and TomorrowVMware Tanzu
 
Reactive programming
Reactive programmingReactive programming
Reactive programmingSUDIP GHOSH
 
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersNinja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersChang W. Doh
 
What Is Express JS?
What Is Express JS?What Is Express JS?
What Is Express JS?Simplilearn
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring bootAntoine Rey
 
NodeJS guide for beginners
NodeJS guide for beginnersNodeJS guide for beginners
NodeJS guide for beginnersEnoch Joshua
 
Reactive Programming In Java Using: Project Reactor
Reactive Programming In Java Using: Project ReactorReactive Programming In Java Using: Project Reactor
Reactive Programming In Java Using: Project ReactorKnoldus Inc.
 
NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA  NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA Pramendra Gupta
 

What's hot (20)

Introduction to Node.js
Introduction to Node.jsIntroduction to Node.js
Introduction to Node.js
 
React Server Side Rendering with Next.js
React Server Side Rendering with Next.jsReact Server Side Rendering with Next.js
React Server Side Rendering with Next.js
 
Nodejs Explained with Examples
Nodejs Explained with ExamplesNodejs Explained with Examples
Nodejs Explained with Examples
 
Netty 세미나
Netty 세미나Netty 세미나
Netty 세미나
 
React Router: React Meetup XXL
React Router: React Meetup XXLReact Router: React Meetup XXL
React Router: React Meetup XXL
 
ZeroMQ
ZeroMQZeroMQ
ZeroMQ
 
Introduction to Node js
Introduction to Node jsIntroduction to Node js
Introduction to Node js
 
Project Reactor Now and Tomorrow
Project Reactor Now and TomorrowProject Reactor Now and Tomorrow
Project Reactor Now and Tomorrow
 
Fetch API Talk
Fetch API TalkFetch API Talk
Fetch API Talk
 
Spring Boot
Spring BootSpring Boot
Spring Boot
 
Reactive programming
Reactive programmingReactive programming
Reactive programming
 
Ninja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for BeginnersNinja Build: Simple Guide for Beginners
Ninja Build: Simple Guide for Beginners
 
Project Reactor By Example
Project Reactor By ExampleProject Reactor By Example
Project Reactor By Example
 
What Is Express JS?
What Is Express JS?What Is Express JS?
What Is Express JS?
 
Introduction à spring boot
Introduction à spring bootIntroduction à spring boot
Introduction à spring boot
 
NodeJS guide for beginners
NodeJS guide for beginnersNodeJS guide for beginners
NodeJS guide for beginners
 
Reactive Programming In Java Using: Project Reactor
Reactive Programming In Java Using: Project ReactorReactive Programming In Java Using: Project Reactor
Reactive Programming In Java Using: Project Reactor
 
Node js introduction
Node js introductionNode js introduction
Node js introduction
 
Support Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFISupport Web Services SOAP et RESTful Mr YOUSSFI
Support Web Services SOAP et RESTful Mr YOUSSFI
 
NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA  NextJS, A JavaScript Framework for building next generation SPA
NextJS, A JavaScript Framework for building next generation SPA
 

Similar to HTML5의 web worker

JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨sys4u
 
Html5 web workers
Html5 web workersHtml5 web workers
Html5 web workersWoo Jin Kim
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJSEunYoung Kim
 
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)YoungSu Son
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4Usys4u
 
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.Hyung Eun Jin
 
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http RequestNAVER D2
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&Csys4u
 
LucideWorks Banana 소개
LucideWorks Banana 소개 LucideWorks Banana 소개
LucideWorks Banana 소개 SuHyun Jeon
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyondJae Sung Park
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용Jin wook
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 Yong Joon Moon
 
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js [W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js 양재동 코드랩
 
CRUD Pattern in Ajax
CRUD Pattern in AjaxCRUD Pattern in Ajax
CRUD Pattern in AjaxRhio Kim
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기Huey Park
 
예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스Dexter Jung
 

Similar to HTML5의 web worker (20)

JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
JQuery를 이용하여 웹 위젯 작성하기_(주)시스포유아이앤씨
 
Web workers
Web workersWeb workers
Web workers
 
Html5 web workers
Html5 web workersHtml5 web workers
Html5 web workers
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 
Data-binding AngularJS
Data-binding AngularJSData-binding AngularJS
Data-binding AngularJS
 
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
[NEXT] Android 개발 경험 프로젝트 4일차 (Networking)
 
Memory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4UMemory_leak_patterns_in_JavaScript_SYS4U
Memory_leak_patterns_in_JavaScript_SYS4U
 
RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.RequireJS를 이용한 모듈관리.
RequireJS를 이용한 모듈관리.
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request
[D2 CAMPUS] 안드로이드 오픈소스 스터디자료 - Http Request
 
Introduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&CIntroduction to Fork Join Framework_SYS4U I&C
Introduction to Fork Join Framework_SYS4U I&C
 
LucideWorks Banana 소개
LucideWorks Banana 소개 LucideWorks Banana 소개
LucideWorks Banana 소개
 
Front end dev 2016 & beyond
Front end dev 2016 & beyondFront end dev 2016 & beyond
Front end dev 2016 & beyond
 
4-2. ajax
4-2. ajax4-2. ajax
4-2. ajax
 
Node.js의 도입과 활용
Node.js의 도입과 활용Node.js의 도입과 활용
Node.js의 도입과 활용
 
파이썬 플라스크 이해하기
파이썬 플라스크 이해하기 파이썬 플라스크 이해하기
파이썬 플라스크 이해하기
 
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js [W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
[W3C HTML5 2017] 예제를 통해 쉽게 살펴보는 Vue.js
 
CRUD Pattern in Ajax
CRUD Pattern in AjaxCRUD Pattern in Ajax
CRUD Pattern in Ajax
 
Node.js 시작하기
Node.js 시작하기Node.js 시작하기
Node.js 시작하기
 
예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스예제를 통해 쉽게_살펴보는_뷰제이에스
예제를 통해 쉽게_살펴보는_뷰제이에스
 

HTML5의 web worker

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.