Download - Web workers¶llel.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>