VueJsが利用されているWebアプリケーションをパフォーマンス向上したところでDebounceという概念を見当たりました。
良い改善点だと思いますので、こちらの記事でDebounceのやり方を紹介させて頂きたいと思います。
拝見
インタラクションWeb アプリケーションを開発するなら、特にVueJsのWebアプリケーションを実装する際に、パフォーマンス最適化について考えた方が良いと思います。Windowイベントリスナー登録の辺り、検索フォームの入力にタイピング、スクロール、エレメントのサイズ変更などのイベントをリッスンすると、重い処理を実行したら、アプリケーションが重くなって、レスポンスが反応できない可能性があります。
例：検索機能を開発する前提でユーザーに良いUI・UXを提供したい為、ユーザーが検索のテキストボックスに入力したら、自動的に検索結果を出すようにします。ただ、問題になるのはユーザーがキーボードを打つ度に、APIでデータを取得するという重い処理が実装されてきて、キーボードで入力する回数により、APIを呼び出す処理がどんどん溜まり、アプリケーションでは膨大なネットワークリクエストが生成されてしまいます。なので、パフォーマンスが減ることになっています。
Debounceについて
上記の例で発生した問題はDebounceを導入したら、簡単に解決できます。
Debounceを導入したら、キーボード入力イベントで行う処理が一時的に待たせるようにします。キーボードの打つが一定時間止まった時に検索の処理を行います。決まったテキストで検索するなら、キーボードの打つを連続して文字を入力終わりまで、検索結果を所得リクエストは1回だけです。このようにdebounceを利用することでシステムの処理の負荷を下げることができます。
こちらはデバウンス関数のコードスニペットです。
export function debounce(fn, wait){
let timer;
return function(...args){
if(timer) {
clearTimeout(timer); // イベントにトリガーする際に、すでに存在しているtimerを削除する。
}
const context = this;
timer = setTimeout(()=>{ // イベントにトリガーする度に、新しい timerを作成する。
fn.apply(context, args); // 一時的に待たせてから、処理を実行する。
}, wait);
}
}
DebouceをVueのwatcherで導入してみる。
Vueのwatcherでユーザーがテキストボックスに入力したときに値のログに記録して、Fetch API を呼び出すという単純なコンポーネントを検討しましょう。
- debounce利用しない。
<template>
<div id="app">
<input v-model="value" type="text" />
</div>
</template>
<script>
export default {
data() {
return {
value: "",
};
},
watch: {
value(newValue, oldValue) {
console.log("value changed: ", newValue, oldValue);
// APIを叩いて、データーを所得する
}
}
};
</script>
上記の例では、ユーザーがフォームに値を入力するたびに、コンソールに値のログが記録され、何かのAPIが呼び出されます。APIをそのように呼び出すなら、アプリケーショのパフォーマンスが改善できません。
- debounce利用する。
<template>
<div id="app">
<input v-model="value" type="text" />
</div>
</template>
<script>
import {debounce} from "./Utils.js";
export default {
data() {
return {
value: "",
};
},
created(){
this.debouncedFetch = debounce((newValue, oldValue)=>{
console.log("value changed: ", newValue, oldValue);
// APIを叩いて、データーを所得する
}, 1000);
},
watch: {
value(...args) {
this.debouncedFetch(...args);
}
}
};
</script>
上記のコードでは、最後のキーボード打つことから 1000 ミリ秒が経ると、ユーザーはコンソールにログインするとAPIの呼び出すなどの処理が実行されます。
debouncedFetch のインスタンスを作成することで、Watcherにdebouncedが実装されます。debouncedFetchの中身にはコールバックと待ち時間を定義されています。このインスタンスはcreated()フックで作成され、Watcher内で適切な引数をコールバックの変数に渡します。
参考