throttleすげぇぇぇ

Transcript

1. throttleがすごい話 Vueのリアクティブシステム
2. NLP のしぐまです！ • 株式会社エヌエルプラスに去年入社しました。 ◦ リファラル採用やってます！ • 自分はイベント配信プラットフォーム (受託) 等やってます。 • 現在は主にNuxtとGoとGCPを触っています。 ◦ フルスタックです！何でも屋とも言う…なぜかGoも触ってる… • シニアエンジニアです。
3. Vueのリアクティブシステム
4. 変数の書き換えが速さがいやらしい場合 • 変数の書き換えに反応して重たい描画機能が走っている場合。書き換えの速さに よって死ぬ。 ◦ 経験したケースでは秒間数十回走るとつらい。 ◦ 高速なチャットとか。 • throttle で書き換え回数を制限してしまえば安定するのではないか？
5. throttleの概要 • 関数の実行回数をNミリ秒に一回に制限できる。 ◦ 500 ミリ秒なら秒間 2 回 • Nミリ秒内の実行は無視されず、次の実行可能タイミングに実行される。 • lodashに入ってる
6. どう制限するか • ウォッチャに throttle で ラップした update 関数 を仕込み、更新回数の 制限された変数を実際 にその変数を描画する コンポーネントに渡す。 DRAW COMPONENT throttled variable: drawするコンポーネントへ渡 す。 update function: throttled variableを更新 watch: callback に throttle update function, 高速 で更新される store の変数を watch STORE
7. こんな感じ
8. lodash の throttle が優秀 • 公式ドキュメントから参照され ていた記事 https://css-tricks.com/debou ncing-throttling-explained-e xamples/ にあるデモを一部 throttle 用に書き換えた。
9. ユースケース（throttle, debounce） • 複数回の誤クリックの対策 • スクロールイベント等の制限 • リアクティブシステムの暴走を止める
10. イベント駆動な JavaScript を制する