perf(frontend): サーバーにカスタム絵文字の種類が多い場合のパフォーマンスの改善

Resolve #10925
This commit is contained in:
syuilo 2023-05-31 12:42:24 +09:00
parent 14da0a65f7
commit 821bb1c476
4 changed files with 14 additions and 5 deletions

View File

@ -32,6 +32,7 @@
- ハッシュタグのノート一覧ページから、そのハッシュタグで投稿するボタンを追加 - ハッシュタグのノート一覧ページから、そのハッシュタグで投稿するボタンを追加
- アカウント初期設定ウィザードに戻るボタンを追加 - アカウント初期設定ウィザードに戻るボタンを追加
- アカウントの初期設定ウィザードにあとでボタンを追加 - アカウントの初期設定ウィザードにあとでボタンを追加
- サーバーにカスタム絵文字の種類が多い場合のパフォーマンスの改善
- Fix: URLプレビューで情報が取得できなかった際の挙動を修正 - Fix: URLプレビューで情報が取得できなかった際の挙動を修正
- Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正 - Fix: Safari、Firefoxでの新規登録時、パスワードマネージャーにメールアドレスが登録されていた挙動を修正
- Fix: ロールタイムラインが無効でも投稿が流れてしまう問題の修正 - Fix: ロールタイムラインが無効でも投稿が流れてしまう問題の修正

View File

@ -101,7 +101,7 @@ import { isTouchUsing } from '@/scripts/touch';
import { deviceKind } from '@/scripts/device-kind'; import { deviceKind } from '@/scripts/device-kind';
import { i18n } from '@/i18n'; import { i18n } from '@/i18n';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { customEmojiCategories, customEmojis } from '@/custom-emojis'; import { customEmojiCategories, customEmojis, customEmojisMap } from '@/custom-emojis';
import { $i } from '@/account'; import { $i } from '@/account';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -337,7 +337,7 @@ function done(query?: string): boolean | void {
if (query == null || typeof query !== 'string') return; if (query == null || typeof query !== 'string') return;
const q2 = query.replace(/:/g, ''); const q2 = query.replace(/:/g, '');
const exactMatchCustom = customEmojis.value.find(emoji => emoji.name === q2); const exactMatchCustom = customEmojisMap.get(q2);
if (exactMatchCustom) { if (exactMatchCustom) {
chosen(exactMatchCustom); chosen(exactMatchCustom);
return true; return true;

View File

@ -7,7 +7,7 @@
import { computed } from 'vue'; import { computed } from 'vue';
import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy'; import { getProxiedImageUrl, getStaticImageUrl } from '@/scripts/media-proxy';
import { defaultStore } from '@/store'; import { defaultStore } from '@/store';
import { customEmojis } from '@/custom-emojis'; import { customEmojisMap } from '@/custom-emojis';
const props = defineProps<{ const props = defineProps<{
name: string; name: string;
@ -26,7 +26,7 @@ const rawUrl = computed(() => {
return props.url; return props.url;
} }
if (isLocal.value) { 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`; return props.host ? `/emoji/${customEmojiName.value}@${props.host}.webp` : `/emoji/${customEmojiName.value}.webp`;
}); });

View File

@ -1,4 +1,4 @@
import { shallowRef, computed, markRaw } from 'vue'; import { shallowRef, computed, markRaw, watch } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { api, apiGet } from './os'; import { api, apiGet } from './os';
import { useStream } from '@/stream'; import { useStream } from '@/stream';
@ -16,6 +16,14 @@ export const customEmojiCategories = computed<[ ...string[], null ]>(() => {
return markRaw([...Array.from(categories), null]); return markRaw([...Array.from(categories), null]);
}); });
export const customEmojisMap = new Map<string, Misskey.entities.CustomEmoji>();
watch(customEmojis, emojis => {
customEmojisMap.clear();
for (const emoji of emojis) {
customEmojisMap.set(emoji.name, emoji);
}
}, { immediate: true });
// TODO: ここら辺副作用なのでいい感じにする // TODO: ここら辺副作用なのでいい感じにする
const stream = useStream(); const stream = useStream();