perf(frontend): improve rendering performance

3 files changed, 8 insertions, 8 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8e3c9dfc77..abdc788721 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 - Enhance: 投稿フォームにファイルをペースト/ドロップした際のUXを改善
 - Enhance: ページネーション(一覧表示)の並び順を逆にできるように
 - Enhance: ページネーション(一覧表示)の基準日時を指定できるように
+- Enhance: レンダリングパフォーマンスの向上
 - Fix: ファイルがドライブの既定アップロード先に指定したフォルダにアップロードされない問題を修正
 - Fix: プラグインをアンインストールしてもセーブデータが残る問題を修正
 - Fix: 数時間後Misskeyのタブに戻った際に、タブがスロットリングされている間の更新アニメーションを延々見せ続けられる問題を修正
diff --git a/packages/frontend/src/components/MkNote.vue b/packages/frontend/src/components/MkNote.vue
index 794a091f30..0605030d5b 100644
--- a/packages/frontend/src/components/MkNote.vue
+++ b/packages/frontend/src/components/MkNote.vue
@@ -729,7 +729,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 	}
 
 	&:hover > .article > .main > .footer > .footerButton {
-		opacity: 1;
+		color: var(--MI_THEME-fg);
 	}
 
 	&.showActionsOnlyHover {
@@ -1004,7 +1004,7 @@ function emitUpdReaction(emoji: string, delta: number) {
 .footerButton {
 	margin: 0;
 	padding: 8px;
-	opacity: 0.7;
+	color: color-mix(in srgb, var(--MI_THEME-panel), var(--MI_THEME-fg) 70%); // opacityなど不透明度で表現するとレンダリングパフォーマンスに影響するので通常の色の混合で代用
 
 	&:not(:last-child) {
 		margin-right: 28px;
@@ -1018,7 +1018,6 @@ function emitUpdReaction(emoji: string, delta: number) {
 .footerButtonCount {
 	display: inline;
 	margin: 0 0 0 8px;
-	opacity: 0.7;
 }
 
 @container (max-width: 580px) {
diff --git a/packages/frontend/src/components/global/MkUrl.vue b/packages/frontend/src/components/global/MkUrl.vue
index 1da16b8923..914c495d7a 100644
--- a/packages/frontend/src/components/global/MkUrl.vue
+++ b/packages/frontend/src/components/global/MkUrl.vue
@@ -28,11 +28,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { defineAsyncComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode.js';
 import { url as local } from '@@/js/config.js';
+import { maybeMakeRelative } from '@@/js/url.js';
+import type { MkABehavior } from '@/components/global/MkA.vue';
 import * as os from '@/os.js';
 import { useTooltip } from '@/composables/use-tooltip.js';
 import { isEnabledUrlPreview } from '@/utility/url-preview.js';
-import type { MkABehavior } from '@/components/global/MkA.vue';
-import { maybeMakeRelative } from '@@/js/url.js';
 
 function safeURIDecode(str: string): string {
 	try {
@@ -94,7 +94,7 @@ const target = self ? null : '_blank';
 }
 
 .schema {
-	opacity: 0.5;
+	color: color(from currentcolor srgb r g b / 0.5); // DOMノード全体をopacityで半透明化するより文字色を半透明化した方が若干レンダリングパフォーマンスが良い
 }
 
 .hostname {
@@ -102,11 +102,11 @@ const target = self ? null : '_blank';
 }
 
 .pathname {
-	opacity: 0.8;
+	color: color(from currentcolor srgb r g b / 0.8); // DOMノード全体をopacityで半透明化するより文字色を半透明化した方が若干レンダリングパフォーマンスが良い
 }
 
 .query {
-	opacity: 0.5;
+	color: color(from currentcolor srgb r g b / 0.5); // DOMノード全体をopacityで半透明化するより文字色を半透明化した方が若干レンダリングパフォーマンスが良い
 }
 
 .hash {