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.

Web workers&parallel.js html5勉強会lt大会

764 views

Published on

ユーザーベースさんとの勉強会で発表しました。
2014/06/05

Published in: Science, Technology, Design
  • Be the first to comment

Web workers&parallel.js html5勉強会lt大会

  1. 1. Web Workers & Parallel.js
  2. 2. (function() { let me = { name : 島川悠太 , twitter : @banana_umai , as : Server Side Engineer , belogns_to : 株式会社リブセンス } })();
  3. 3. Web Workers おさらい
  4. 4. メインページに並行してバッ クグラウンドで走るワーカスク リプトを生成させられるAPI http://www.hcn.zaq.ne.jp/___/WEB/Workers-ja.html
  5. 5. メインページに並行してバッ クグラウンドで走るワーカスク リプトを生成させられるAPI http://www.hcn.zaq.ne.jp/___/WEB/Workers-ja.html
  6. 6. 直接DOMは操作できない
  7. 7. 専用ワーカと共有ワーカ
  8. 8. 専用ワーカと共有ワーカ
  9. 9. 使いドコロはUIスレッド を専有したくない重たい 処理の記述
  10. 10. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  11. 11. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  12. 12. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  13. 13. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  14. 14. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  15. 15. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  16. 16. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  17. 17. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  18. 18. <script> var worker = new Worker("js/worker.js"); worker.onmessage = function(event) { console.log(event.data); }; worker.postMessage(msg); </script> self.onmessage = function(event) { loadScripts( proc.js ); postMessage(procWithData(event.data)); }
  19. 19. Parallel.js http://adambom.github.io/parallel.js/
  20. 20. ブラウザでも サーバーサイドでも 使える
  21. 21. ブラウザでは内部的に 専用ワーカを使って 並列処理を実現
  22. 22. バックグラウンド処理を 書き下せる
  23. 23. <script src= js/parallel.js ></script> <script> var data = …; var p = new Parallel(data); p.spawn(function (data) { // some proc with data running in background … return result; }).then(function (result) { // some proc with result … }); </script>
  24. 24. map/reduceができるよ
  25. 25. <script src= js/parallel.js ></script> <script> var data = [1, 2, 3, 4]; var p = new Parallel(data); p.map(function (datum) { return datum * 2; }).reduce(function (mappedData) { return mappedData[0] + mappedData[1]; }).then(function (reduced) { console.log(mappedData); // 20 }); </script>

×