Web Workers & Parallel.js
(function() {
let me = {
name : 島川悠太 ,
twitter : @banana_umai ,
as : Server Side Engineer ,
belogns_to : 株式会社リブセンス
}
})();
Web Workers おさらい
メインページに並行してバッ
クグラウンドで走るワーカスク
リプトを生成させられるAPI
http://www.hcn.zaq.ne.jp/___/WEB/Workers-ja.html
メインページに並行してバッ
クグラウンドで走るワーカスク
リプトを生成させられるAPI
http://www.hcn.zaq.ne.jp/___/WEB/Workers-ja.html
直接DOMは操作できない
専用ワーカと共有ワーカ
専用ワーカと共有ワーカ
使いドコロはUIスレッド
を専有したくない重たい
処理の記述
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
<script>
var worker = new Worker("js/worker.js");
worker.onmessage = function(event) {
console.log(event.data);
};
worker....
Parallel.js
http://adambom.github.io/parallel.js/
ブラウザでも
サーバーサイドでも
使える
ブラウザでは内部的に
専用ワーカを使って
並列処理を実現
バックグラウンド処理を
書き下せる
<script src= js/parallel.js ></script>
<script>
var data = …;
var p = new Parallel(data);
p.spawn(function (data) {
// som...
map/reduceができるよ
<script src= js/parallel.js ></script>
<script>
var data = [1, 2, 3, 4];
var p = new Parallel(data);
p.map(function (datum...
Upcoming SlideShare
Loading in...5
×

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

334

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
334
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×