狠狠撸

狠狠撸Share a Scribd company logo
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
直接顿翱惭は操作できない
専用ワーカと共有ワーカ
専用ワーカと共有ワーカ
使いドコロは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= /slideshow/web-workersparalleljs-html5lt/35522767/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>
尘补辫/谤别诲耻肠别ができるよ
<script src= /slideshow/web-workersparalleljs-html5lt/35522767/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>

More Related Content

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