perf(NcEmojiPicker): decrease mounting time and memory by moving large constants initialization and storing out from instance's reactive data

[ShGKme]

☑️ Resolves

• Resolves: NcEmojiPicker mounts very slow.

📝 PR

i18n and emojiIndex are not a part of NcEmojiPicker's data. They never change and are not reactive state but just constants. However, they were defined in the data. So each time NcEmojiPicker instance is created:

1. new copies of emojiIndex with constructor new EmojiIndex and i18n were created
2. they became reactive: Vue recursively loops over each property, re-defined them and create associated Dep + Observer instances for reactivity.

While for i18n it's slightly noticeable (0.1ms finally), emojiIndex is very huge (with about 1MB data).

🖼️ Result

Moving constants from data outside the component decreases mounting time and allocating memory.

Metric	🐌 Before	🏎️ After
Mount time	40 - 42 ms per instance	0.90 - 0.98 ms per instance
Memory	1.325 MB per instance	0.073 MB per instance + 1 MB shared
Allocation sampling

40ms may sound nothing. But it multiplies on instances count. So mounting 100 pickers was 4 seconds of blocking time.

It also saves about 1.3 MB RAM per instance. Also sounds small, but it is 130 MB per tab with 100 pickers.

Example: Conversations in Talk with many messages with reactions.

Alternative solution

Initialization of emojiIndex was moved to setup with a check if it was initialized before. So the index is not initialized before the first instance mounting.

We can move it to the module, so index will be ready before the first instance is mounted.

P.S.

NcPicker is still super slow on opening and it is still > 1MB in the bundle.

🏁 Checklist

• ⛑️ Tests are included or are not applicable
• 📘 Component documentation has been extended, updated or is not applicable

[ShGKme]

/backport to stable7

[Antreesy]

Slow laptop here:

Metric	🐌 Before	🏎️ After
Mount time	70 ms per instance	1.5 - 2.3 ms per instance
Memory	+- same results	+- same results

[ShGKme]

Memory +- same results +- same results

Don't forget to collect garbage before looking into heap size in the memory tab

[Antreesy]

Don't forget to collect garbage before looking into heap size in the memory tab

I meant the same results as on your screenshots, only mounting time differs

[ShGKme]

Rebased onto master. I'm not sure we need a performance test in the docs, so it's removed.

For history:

<template>
  <div>
      <button @click="key += 1">Re-mount {{ count }} NcEmojiPicker-s</button> See console output for the result
      <ul :key="key">
          <li v-for="i in count" :key="i">
              <span>#{{ i }}</span>
              <NcEmojiPicker @select="select" style="display: inline-block">
                  <NcButton>Select Emoji</NcButton>
              </NcEmojiPicker>
              <span>selected emoji: {{ emoji }}</span>
          </li>
      </ul>
  </div>
</template>
<script>
  let time;

  export default {
      data() {
          return {
              count: 100,
              emoji: '',
              key: 1,
          }
      },
      beforeUpdate() {
          time = performance.now()
      },
      updated() {
          const allTime = performance.now() - time
          console.log(`NcEmojiPicker ${this.count} instances re-mounting time: ${allTime.toFixed(2)} ms or ${(allTime / this.count).toFixed(2)} ms per instance`)
      },
      methods: {
          select(emoji) {
              this.emoji = emoji
          },
      },
  }
</script>

[ShGKme]

/backport to stable7