Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 web workers

1,482 views

Published on

HTML5 Web Workers 발표자료 입니다.

Published in: Software
  • If you want to download or read this book, copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes.........ACCESS WEBSITE Over for All Ebooks ..... (Unlimited) ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ..............ACCESS that WEBSITE Over for All Ebooks ................ ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... ...................................ALL FOR EBOOKS................................................. Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Html5 web workers

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

×