More Related Content
Similar to Web Workerで○○する話
Similar to Web Workerで○○する話 (20)
Web Workerで○○する話
- 6. 例1 Busyなループ
function loopSync() {
for (var i = 0; i < 1000000000; i++) {
// busyなループ
}
console.log('finish!');
}
document.getElementById('btn').addEventListener('click', function(evt) {
loopSync(); // これが終わるまで何もかも待たされる
}, false);
- 10. Workerを使うと...
function loopSync() {
for (var i = 0; i < 1000000000; i++) {
// busyなループ
}
console.log('finish!');
}
loopSync();
document.getElementById('btn').addEventListener('click', function(evt) {
new Worker('worker.js');
}, false);
重い部分をworker用にスクリプトごと分離
Workerを作って使う
- 20. Workerの種類
Dedicated Worker : 今まで見てきたやつ
Shared Worker : 複数のスクリプトから共有できるやつ
Service Worker : オフラインアプリにするときに役に立つやつ
Chrome Worker : Firefox限定(アドオン用?)
Audio Worker : オーディオ処理用(らしい)
- 32. UI側
function Counter(props) {
const { count, plus, minus } = props;
return (
<div>
<div>{count}</div>
<button onClick={plus}>+</button>
<button onClick={minus}>-</button>
</div>
);
}
Counterコンポーネントを用意
- 33. UI側
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
this.worker = props.worker;
this.worker.onmessage = evt => {
this.setState(evt.data);
};
}
/** 右へ続く -> **/
/** 続き **/
render() {
const { count } = this.state;
return (
<Counter count={count}
plus={this.handlePlus.bind(this)}
minus={this.handleMinus.bind(this)} />
);
}
/** 次のスライドへ続く **/
ControllerViewとしてAppを用意
- 34. UI側
/** 前のスライドからの続き **/
handlePlus() {
this.worker.postMessage({
type: 'UPDATE_COUNT',
payload: {
value: 1
}
});
}
/** 右へ続く -> **/
/** 続き **/
handleMinus() {
this.worker.postMessage({
type: 'UPDATE_COUNT',
payload: {
value: -1
}
});
}
}
アプリケーションコンテナを用意
- 35. UI側
import { render } from 'react-dom';
render(
<App worker={new Worker('back.js')} />,
document.getElementById('app')
);
アプリの起動部分
- 36. Worker側
const state = {
count: 0
};
onmessage = evt => {
postMessage(store(state, evt.data));
};
// initialize
postMessage(state);
function store(state, action) {
const { type, payload } = action;
switch (type) {
case 'UPDATE_COUNT':
return updateCount(state, payload);
default:
return state;
}
}
function updateCount(state, payload) {
const { value } = payload;
state.count += value;
return state;
}