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

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.postMessage(msg); </script>

self.onmessage = function(event) { loadScripts(“proc.js”); postMessage(procWithData(event.data)); }

<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)); }

<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)); }

<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)); }

<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)); }

<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)); }

<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)); }

<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)); }

<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)); }

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) { // some proc with data running in background … return result; }).then(function (result) { // some proc with result … }); </script>

map/reduceができるよ

<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>