perf(frontend): improve rendering performance

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Enhance: 投稿フォームにファイルをペースト/ドロップした際のUXを改善
 - Enhance: ページネーション(一覧表示)の並び順を逆にできるように
 - Enhance: ページネーション(一覧表示)の基準日時を指定できるように
+- Enhance: レンダリングパフォーマンスの向上
 - Fix: ファイルがドライブの既定アップロード先に指定したフォルダにアップロードされない問題を修正
 - Fix: プラグインをアンインストールしてもセーブデータが残る問題を修正
 - Fix: 数時間後Misskeyのタブに戻った際に、タブがスロットリングされている間の更新アニメーションを延々見せ続けられる問題を修正

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) {

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 {