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

673 views

Published on

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

Published in: Science, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
673
On SlideShare
0
From Embeds
0
Number of Embeds
43
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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>

×