Vue記憶によるJS性能改善

数週間前に、私のVueでパフォーマンスの問題を修正するのを助けました.JSアプリケーション.結果は“Vue . js計算されたプロパティのような”パラメータは、それは可能ではありません!

問題

問題はこの大きなタイムラインのコンポーネントに現れました.

要するに

1行1人のイベントの1週間;

イベントは重なるかもしれません(ボブは月曜日の朝に1を持ちます).

イベントをグリッド(左、幅、上部、高さ/線の高さ)に配置するには、このイベントが別のものと重なっている場合、計算する関数を呼び出す必要があります.この関数は多くの場合、時には同じパラメータで呼び出されました.
このコンポーネントは、ローカル環境でうまく動作するために使用されます™️.
しかし、より多くのイベント/日≃ その他の正方形とより多くのユーザー≃ 別の話だった.コンポーネントは、表示するために~ 4〜~ 6秒を取っていました.私はconsole.count() そして、私は私の関数が+ 700回と呼ばれることに気づいた!🙈
私の最初の呼び出しは使用することでしたcomputed() , キャッシュされたプロパティ(それらの反応依存性に基づいて).残念ながら、彼らはパラメータを使用していません.つまり、そうすることはできません.

export default {
  data: () => ({
    events: [/* ... */]
  }),
  computed: {
    // ❌ NOT WORKING!
    eventPosition(event) {
      // ...
    }
  }
}

私は何か他のものを見つけなければならなかった.

救助への回想！

(既にメモが何であるかについて気づいているならば、あなたは直接次のパートにジャンプすることができます)
回想は機能的プログラミング概念である.この関数は、関数の内部キャッシュを使用してパラメータを格納することです.関数が最初に呼び出されると、値を計算し、出力をキャッシュに格納します.この関数を同じパラメータで2回目と呼ぶと、キャッシュから値が返されます
FibonAcci関数は、この実装が再帰を使用するため、memoizationの仕組みの良い例です.この例では、関数を同じ引数で複数回呼び出すことができます.

// without memoization
function fibonacci(n) {
  return (n <= 1) ? 1 : fibonacci(n - 1) + fibonacci(n - 2)
}

そして、memoizationで、以下のように同じ機能が書きます:

// with memoization
function fibonacci(n) {
  // 1
  if (typeof fibonacci.cache === 'undefined') {
    fibonacci.cache = []
  }

  // 2
  if (!fibonacci.cache[n]) {
    fibonacci.cache[n] = (n <= 1) ? 1 : fibonacci(n - 1) + fibonacci(n - 2)
  }

  // 3
  return fibonacci.cache[n]
}

私はこの機能を3段階で分割しました.

関数が初めて実行されると、空のキャッシュを定義します

我々が計算しようとしている値がキャッシュにないなら、我々はそれを計算して、それをキャッシュに加えます;

キャッシュされた値を返します.

あなたが加えるならばconsole.count(n) 第二にif() , あなたは、memoizationでそれを見ます.fibonacci(12) はfibonacci(4) 34の代わりに1回だけ!

🧐 どうしてそんなことがあるのか。

JavaScriptでは、関数はオブジェクトのプロトタイプであるため、memoizationが可能です.

const myCoolFunction = () => true
typeof myCoolFunction. __proto__ // "function"
typeof myCoolFunction. __proto__. __proto__ // "object"

あなたが見ることができるように、memoizationで、我々はパフォーマンスのためにコードの読みやすさを交換します.

Vueにおける想起js

今、私たちはどのように回顧展を見てきましたか?jsコンポーネント.そのためには、関数をVueのmethods . それから、それは我々が以前に見たものとほとんど同じです.

// MyComponent.vue
export default {
  data: () => ({
    events: [/* ... */]
  }),
  methods: {
    positionEvent(event) {
      if (typeof this.positionEvent.cache === 'undefined') {
        this.positionEvent.cache = []
      }

      if (!this.positionEvent.cache[event.id]) {
        const somethingToCache = heavyFunction(event)
        // 🔼 add your function here
        this.positionEvent.cache[event.id] = somethingToCache
      }

      return this.positionEvent.cache[event.id]
    }
  }
}

💡 ヒント

を忘れないでくださいthis メソッドの名前の前に.

お気軽にお客様のニーズにキャッシュキーを適応させる!

それは価値があるか。

この非常に特定のケースで:はい.私のコンポーネントは、同じパラメータを使用して複数回の関数を使用しています.
コンポーネントのレンダリングから〜4 s〜0.3 sに行った.それは10倍速く!

しかし、私はAとして回想を見ませんgolden hammer . 正直なところ、何年ものウェブ開発において初めてメモを使うのは初めてです.
そして、それは今日のためです!
この記事を読んでくれてありがとう🤘. 私はあなたが役に立つことを願って!あなたがそれを好むならば、それを与えてください❤️ または🦄!
また、💙
もともと公開maxpou.fr .