Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
throttleすげぇぇぇ
Search
Sigma
October 10, 2022
Programming
0
75
throttleすげぇぇぇ
Sigma
October 10, 2022
Tweet
Share
More Decks by Sigma
See All by Sigma
Proxmox_VE.pdf
seiyasugimoto
0
100
Stable Diffusionで遊んでみた
seiyasugimoto
0
110
EVAフレームワーク
seiyasugimoto
0
78
SSR+SPA
seiyasugimoto
0
110
Nuxtにおける設計
seiyasugimoto
0
77
Atomic Designを ディレクトリ以外で表現
seiyasugimoto
0
67
スマホでPythonしたい
seiyasugimoto
0
60
平文で保存するな!
seiyasugimoto
0
82
ソースコードを読もう
seiyasugimoto
0
77
Other Decks in Programming
See All in Programming
『改訂新版前処理大全』の話と Apache Parquet の話 #TokyoR
bob3bob3
0
170
短期AHCで勝つためのテクニック
shun_pi
3
1.6k
Introduction to safe programming with numeric library / 数値ライブラリで始める安全なプログラミング
boykush
2
13k
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
530
dbt v1.8で追加された単体テストを触ってみた
k_data_analyst
1
160
我々はなぜテストを書くのか / Why we write test codes
takaking22
4
370
What new in Android Studio 2024.6
vast00
0
120
JJUG CCC 2024 Spring自動アップグレードを夢見て、Amazon Q Developer使ってみた
toricky6
2
140
multipart/form-dataの省メモリパース / Go Conference 2024 Pre Party #gocon24_preparty
mazrean
0
310
C++23 スタックトレースライブラリ
faithandbrave
0
140
about #67401 //go:linkname
andpad
1
17k
生成AIキャラクター作成プラットフォームにおける LLM応答の柔軟性の拡張の工夫
ykimura517
3
680
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
133
6.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Navigating Team Friction
lara
180
13k
Building Adaptive Systems
keathley
33
2k
Web development in the modern age
philhawksworth
203
10k
How to name files
jennybc
66
95k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
GraphQLの誤解/rethinking-graphql
sonatard
57
9.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
How to train your dragon (web standard)
notwaldorf
77
5.3k
Writing Fast Ruby
sferik
623
60k
Transcript
throttleがすごい話 Vueのリアクティブシステム
NLP のしぐまです! • 株式会社エヌエルプラスに去年入社しました。 ◦ リファラル採用やってます! • 自分はイベント配信プラットフォーム (受託) 等やってます。
• 現在は主にNuxtとGoとGCPを触っています。 ◦ フルスタックです!何でも屋とも言う…なぜかGoも触ってる… • シニアエンジニアです。
Vueのリアクティブシステム
変数の書き換えが速さがいやらしい場合 • 変数の書き換えに反応して重たい描画機能が走っている場合。書き換えの速さに よって死ぬ。 ◦ 経験したケースでは秒間数十回走るとつらい。 ◦ 高速なチャットとか。 • throttle
で書き換え回数を制限してしまえば安定するのではないか?
throttleの概要 • 関数の実行回数をNミリ秒に一回に制限できる。 ◦ 500 ミリ秒なら秒間 2 回 • Nミリ秒内の実行は無視されず、次の実行可能タイミングに実行される。
• lodashに入ってる
どう制限するか • ウォッチャに throttle で ラップした update 関数 を仕込み、更新回数の 制限された変数を実際
にその変数を描画する コンポーネントに渡す。 DRAW COMPONENT throttled variable: drawするコンポーネントへ渡 す。 update function: throttled variableを更新 watch: callback に throttle update function, 高速 で更新される store の変数を watch STORE
こんな感じ
lodash の throttle が優秀 • 公式ドキュメントから参照され ていた記事 https://css-tricks.com/debou ncing-throttling-explained-e xamples/
にあるデモを一部 throttle 用に書き換えた。
ユースケース(throttle, debounce) • 複数回の誤クリックの対策 • スクロールイベント等の制限 • リアクティブシステムの暴走を止める
イベント駆動な JavaScript を制する