From 821bb1c4767bee84fd9e1196cfee0dabf92c431a Mon Sep 17 00:00:00 2001 From: syuilo Date: Wed, 31 May 2023 12:42:24 +0900 Subject: [PATCH] =?UTF-8?q?perf(frontend):=20=E3=82=B5=E3=83=BC=E3=83=90?= =?UTF-8?q?=E3=83=BC=E3=81=AB=E3=82=AB=E3=82=B9=E3=82=BF=E3=83=A0=E7=B5=B5?= =?UTF-8?q?=E6=96=87=E5=AD=97=E3=81=AE=E7=A8=AE=E9=A1=9E=E3=81=8C=E5=A4=9A?= =?UTF-8?q?=E3=81=84=E5=A0=B4=E5=90=88=E3=81=AE=E3=83=91=E3=83=95=E3=82=A9?= =?UTF-8?q?=E3=83=BC=E3=83=9E=E3=83=B3=E3=82=B9=E3=81=AE=E6=94=B9=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Resolve #10925 --- CHANGELOG.md | 1 + packages/frontend/src/components/MkEmojiPicker.vue | 4 ++-- .../frontend/src/components/global/MkCustomEmoji.vue | 4 ++-- packages/frontend/src/custom-emojis.ts | 10 +++++++++- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a61051e32b..0e61e7f35c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -32,6 +32,7 @@ - ハッシュタグのノート一覧ページから、そのハッシュタグで投稿するボタンを追加 - アカウント初期設定ウィザードに戻るボタンを追加 - アカウントの初期設定ウィザードにあとでボタンを追加 +- サーバーにカスタム絵文字の種類が多い場合のパフォーマンスの改善 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正 - Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正 - Fix: ロールタイムラインが無効でも投稿が流れてしまう問題の修正 diff --git a/packages/frontend/src/components/MkEmojiPicker.vue b/packages/frontend/src/components/MkEmojiPicker.vue index d489b3e9b9..b632baaa2b 100644 --- a/packages/frontend/src/components/MkEmojiPicker.vue +++ b/packages/frontend/src/components/MkEmojiPicker.vue @@ -101,7 +101,7 @@ import { isTouchUsing } from '@/scripts/touch'; import { deviceKind } from '@/scripts/device-kind'; import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; -import { customEmojiCategories, customEmojis } from '@/custom-emojis'; +import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-emojis'; import { $i } from '@/account'; const props = withDefaults(defineProps<{ @@ -337,7 +337,7 @@ function done(query?: string): boolean | void { if (query == null || typeof query !== 'string') return; const q2 = query.replace(/:/g, ''); - const exactMatchCustom = customEmojis.value.find(emoji => emoji.name === q2); + const exactMatchCustom = customEmojisMap.get(q2); if (exactMatchCustom) { chosen(exactMatchCustom); return true; diff --git a/packages/frontend/src/components/global/MkCustomEmoji.vue b/packages/frontend/src/components/global/MkCustomEmoji.vue index 0cb31ffcba..e8a7f17cc6 100644 --- a/packages/frontend/src/components/global/MkCustomEmoji.vue +++ b/packages/frontend/src/components/global/MkCustomEmoji.vue @@ -7,7 +7,7 @@ import { computed } from 'vue'; import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy'; import { defaultStore } from '@/store'; -import { customEmojis } from '@/custom-emojis'; +import { customEmojisMap } from '@/custom-emojis'; const props = defineProps<{ name: string; @@ -26,7 +26,7 @@ const rawUrl = computed(() => { return props.url; } if (isLocal.value) { - return customEmojis.value.find(x => x.name === customEmojiName.value)?.url ?? null; + return customEmojisMap.get(customEmojiName.value)?.url ?? null; } return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`; }); diff --git a/packages/frontend/src/custom-emojis.ts b/packages/frontend/src/custom-emojis.ts index de1b5b8a63..9b738b2fd4 100644 --- a/packages/frontend/src/custom-emojis.ts +++ b/packages/frontend/src/custom-emojis.ts @@ -1,4 +1,4 @@ -import { shallowRef, computed, markRaw } from 'vue'; +import { shallowRef, computed, markRaw, watch } from 'vue'; import * as Misskey from 'misskey-js'; import { api, apiGet } from './os'; import { useStream } from '@/stream'; @@ -16,6 +16,14 @@ export const customEmojiCategories = computed<[ ...string[], null ]>(() => { return markRaw([...Array.from(categories), null]); }); +export const customEmojisMap = new Map(); +watch(customEmojis, emojis => { + customEmojisMap.clear(); + for (const emoji of emojis) { + customEmojisMap.set(emoji.name, emoji); + } +}, { immediate: true }); + // TODO: ここら辺副作用なのでいい感じにする const stream = useStream();