DebounceでVuejsのパフォーマンスを最適化 #JavaScript

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内で適切な引数をコールバックの変数に渡します。

DebounceでVuejsのパフォーマンスを最適化

拝見

Debounceについて

DebouceをVueのwatcherで導入してみる。

参考