Download to read offline
Web Workerで○○する話
- 1.
- 2.
- 3. Web Worker ご存知ですか orおぼえてますか
- 4.
- 5.
- 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);
- 7. 例2 同期なHTTP通信 document.getElementById('btn').addEventListener('click', function(evt){ var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/slow', false); // 第3引数のasyncフラグをオフにして"同期"通信に xhr.send(null); // レスポンスくるまで待たされる console.log(xhr.responseText); }, false);
- 8.
- 9.
- 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を作って使う
- 11.
- 12.
- 13. Workerを使うためには ワーカー用のスクリプトのURI渡してインスタンスを生成する var worker =new Worker('worker.js'); このときのURIは同一生成ポリシーに従う必要がある。
- 14. メッセージのやりとり Worker UI postMessageで送る。 onmessageで受け取る。 worker.postMessage('start'); worker.onmessage = function(evt){ // MessageEvent console.log(evt.data); };
- 15. （もうちょっと）メッセージのやりとり Worker UI postMessageで送るデータは共有ではなくコピーされる。 onmessageで受けとったものはコピー。 worker.postMessage({ count: 1000}); worker.onmessage = function(evt) { // MessageEvent console.log(evt.data); }; 同一のインスタンスを共有せずに双方で複製。
- 16.
- 17. Workerの中 selfがグローバルスコープショートカット（UI側のwindow） windowやdocumentなど触れないものがある 詳しくは https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers 外部スクリプトはimportScriptsで読み込む WorkerがさらにWorkerを生成とかもできる。 self.onmessage =function(evt) { if (evt.data === 'start') { self.postMessage('fin'); } else if (evt.data === 'stop') { self.close(); } }; importScripts(‘foo.js’, ‘hoge.js’);
- 18.
- 19. Worker内でのエラー ErrorEventになるのでonerrorで拾える。 worker.onerror = function(evt){ // ErrorEvent console.log(evt.message); // “Uncaught Error:／(^o^)＼” console.log(evt.lineno); // 12 };
- 20. Workerの種類 Dedicated Worker :今まで見てきたやつ Shared Worker : 複数のスクリプトから共有できるやつ Service Worker : オフラインアプリにするときに役に立つやつ Chrome Worker : Firefox限定（アドオン用？） Audio Worker : オーディオ処理用（らしい）
- 21. ブラウザの対応状況（デスクトップ系） 細かい機能レベルになるともっと分かれる模様 参考 https://developer.mozilla.org/ja/docs/Web/Guide/Performance/Using_web_workers#Browser_compatibility Internet Explorer10.0+ Firefox 3.5+ Chrome 4+ Opera 10.6+ Safari 4+
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 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; }
- 37.
- 38.
- 39.