From af3e7cf20734722ca639f040f2459679d2039dcb Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Fri, 3 May 2024 23:23:56 +0800
Subject: [PATCH] perf: add `transform-gpu` to improve performance

---
 src/components/BackToTopAndRefreshButtons.vue      | 1 +
 src/components/Dialog.vue                          | 1 +
 src/components/Dock/Dock.vue                       | 2 +-
 src/components/SearchBar/SearchBar.vue             | 4 ++--
 src/components/Settings/Settings.vue               | 8 ++++----
 src/components/TopBar/TopBar.vue                   | 5 +++--
 src/contentScripts/views/Favorites/Favorites.vue   | 2 +-
 src/contentScripts/views/Home/Home.vue             | 4 ++--
 src/contentScripts/views/WatchLater/WatchLater.vue | 2 +-
 src/styles/transitionAndTransitionGroup.scss       | 6 +++---
 10 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/BackToTopAndRefreshButtons.vue b/src/components/BackToTopAndRefreshButtons.vue
index 74d590de..02d8b328 100644
--- a/src/components/BackToTopAndRefreshButtons.vue
+++ b/src/components/BackToTopAndRefreshButtons.vue
@@ -21,6 +21,7 @@ const emit = defineEmits(['refresh', 'back-to-top'])
         --b-button-shadow-active: var(--bew-shadow-1);
         backdrop-filter: var(--bew-filter-glass-1);
       "
+      transform-gpu
       @click="showRefreshButton ? emit('refresh') : emit('back-to-top')"
     >
       <Transition name="fade">
diff --git a/src/components/Dialog.vue b/src/components/Dialog.vue
index c545157b..35d2164e 100644
--- a/src/components/Dialog.vue
+++ b/src/components/Dialog.vue
@@ -92,6 +92,7 @@ function handleConfirm() {
         v-if="showDialog"
         class="dialog"
         pos="fixed top-0 left-0" w-full h-full z-100 z-10002
+        transform-gpu
       >
         <div
           bg="black opacity-40 dark:opacity-40"
diff --git a/src/components/Dock/Dock.vue b/src/components/Dock/Dock.vue
index 1bae0051..bde1ce31 100644
--- a/src/components/Dock/Dock.vue
+++ b/src/components/Dock/Dock.vue
@@ -97,7 +97,7 @@ function toggleDockHide(hide: boolean) {
         hide: hideDock,
       }"
       style="backdrop-filter: var(--bew-filter-glass-1);"
-      absolute duration-300 ease-in-out
+      absolute duration-300 ease-in-out transform-gpu
       p-2 m-2 bg="$bew-content-2 dark:$bew-elevated-1" flex="~ col gap-2 shrink-0"
       rounded="60px" border="1px $bew-border-color"
       shadow="$bew-shadow-2"
diff --git a/src/components/SearchBar/SearchBar.vue b/src/components/SearchBar/SearchBar.vue
index 650bc359..666ee0e3 100644
--- a/src/components/SearchBar/SearchBar.vue
+++ b/src/components/SearchBar/SearchBar.vue
@@ -185,7 +185,7 @@ async function handleClearSearchHistory() {
     <div
       v-if="blurredOnFocus"
       pos="fixed top-0 left-0" w-full h-full duration-500 pointer-events-none
-      ease-out
+      ease-out transform-gpu
       :style="{ backdropFilter: isFocus ? 'blur(15px)' : 'blur(0)' }"
     />
 
@@ -344,7 +344,7 @@ async function handleClearSearchHistory() {
 
   @mixin card-content {
     --at-apply: text-base outline-none w-full
-      bg-$b-search-bar-color shadow-$bew-shadow-2;
+      bg-$b-search-bar-color shadow-$bew-shadow-2 transform-gpu;
     backdrop-filter: var(--bew-filter-glass-1);
   }
 
diff --git a/src/components/Settings/Settings.vue b/src/components/Settings/Settings.vue
index 3efd66ed..6cb413af 100644
--- a/src/components/Settings/Settings.vue
+++ b/src/components/Settings/Settings.vue
@@ -120,7 +120,7 @@ function setCurrentTitle() {
 
     <div
       id="settings-window" pos="fixed top-1/2 left-1/2" w="90%" h="90%"
-      max-w-1000px max-h-900px transform="~ translate-x--1/2 translate-y--1/2"
+      max-w-1000px max-h-900px transform="~ translate-x--1/2 translate-y--1/2 gpu"
       flex justify-between items-center
     >
       <aside
@@ -137,7 +137,7 @@ function setCurrentTitle() {
           "
           flex="~ gap-2 col" rounded="30px hover:25px" p-2 shadow
           bg="$bew-content-2 hover:$bew-elevated-1 dark:$bew-elevated-1 dark-hover:$bew-elevated-2"
-          scale="group-hover:105" duration-300 overflow-hidden antialiased
+          scale="group-hover:105" duration-300 overflow-hidden antialiased transform-gpu
           border="1 $bew-border-color"
         >
           <!-- mask -->
@@ -174,7 +174,7 @@ function setCurrentTitle() {
           backdrop-filter: var(--bew-filter-glass-2);
         "
         relative overflow="x-hidde" w-full h-full bg="$bew-content-2 dark:$bew-elevated-1"
-        shadow rounded="$bew-radius" border="1 $bew-border-color"
+        shadow rounded="$bew-radius" border="1 $bew-border-color" transform-gpu
       >
         <header
           flex justify-between items-center w-full h-80px
@@ -192,7 +192,7 @@ function setCurrentTitle() {
               -webkit-mask-image: linear-gradient(to bottom, black 0, transparent 100%);
               backdrop-filter: blur(6px);
             "
-            z--1 rounded-inherit
+            z--1 rounded-inherit transform-gpu
           />
           <div text="3xl" fw-bold>
             {{ title }}
diff --git a/src/components/TopBar/TopBar.vue b/src/components/TopBar/TopBar.vue
index ab1c4460..64fdf03d 100644
--- a/src/components/TopBar/TopBar.vue
+++ b/src/components/TopBar/TopBar.vue
@@ -379,7 +379,7 @@ defineExpose({
           backdrop-filter:var(--bew-filter-glass-1)
         "
         pos="absolute top-0 left-0" w-full h-80px
-        pointer-events-none
+        pointer-events-none transform-gpu
       />
       <Transition name="fade">
         <div
@@ -408,7 +408,7 @@ defineExpose({
               flex items-center border="1 $bew-border-color"
               rounded="50px" p="x-4" shadow="$bew-shadow-2" duration-300
               bg="$bew-elevated-1 hover:$bew-theme-color dark-hover:white"
-              w-auto h-50px
+              w-auto h-50px transform-gpu
             >
               <svg
                 t="1645466458357"
@@ -462,6 +462,7 @@ defineExpose({
           style="backdrop-filter: var(--bew-filter-glass-1)"
           ml-auto flex h-55px p-2 bg="$bew-elevated-1"
           text="$bew-text-1" border="1 $bew-border-color" rounded-full shadow="$bew-shadow-2"
+          transform-gpu
         >
           <div v-if="!isLogin" class="right-side-item">
             <a href="https://passport.bilibili.com/login" class="login">
diff --git a/src/contentScripts/views/Favorites/Favorites.vue b/src/contentScripts/views/Favorites/Favorites.vue
index 38728dbf..b41a2226 100644
--- a/src/contentScripts/views/Favorites/Favorites.vue
+++ b/src/contentScripts/views/Favorites/Favorites.vue
@@ -258,7 +258,7 @@ function isMusic(item: FavoriteResource) {
           z--1
         >
           <div
-            absolute w-full h-full backdrop-blur-40px
+            absolute w-full h-full backdrop-blur-40px transform-gpu
             bg="$bew-fill-4"
           />
           <img
diff --git a/src/contentScripts/views/Home/Home.vue b/src/contentScripts/views/Home/Home.vue
index ae9829a5..fc868e97 100644
--- a/src/contentScripts/views/Home/Home.vue
+++ b/src/contentScripts/views/Home/Home.vue
@@ -206,7 +206,7 @@ function toggleTabContentLoading(loading: boolean) {
             style="backdrop-filter: var(--bew-filter-glass-1)"
             px-4 lh-35px h-35px bg="$bew-elevated-1 hover:$bew-elevated-1-hover" rounded="$bew-radius"
             cursor-pointer shadow="$bew-shadow-1" box-border border="1 $bew-border-color" duration-300
-            flex="~ gap-2 items-center"
+            flex="~ gap-2 items-center" transform-gpu
             @click="handleChangeTab(tab)"
           >
             <span class="text-center">{{ $t(tab.i18nKey) }}</span>
@@ -223,7 +223,7 @@ function toggleTabContentLoading(loading: boolean) {
 
         <div
           style="backdrop-filter: var(--bew-filter-glass-1)"
-          flex="~ gap-1 shrink-0" p-1 h-35px bg="$bew-elevated-1"
+          flex="~ gap-1 shrink-0" p-1 h-35px bg="$bew-elevated-1" transform-gpu
           rounded="$bew-radius" shadow="$bew-shadow-1" box-border border="1 $bew-border-color"
         >
           <Icon
diff --git a/src/contentScripts/views/WatchLater/WatchLater.vue b/src/contentScripts/views/WatchLater/WatchLater.vue
index 1a49b289..e59ee26d 100644
--- a/src/contentScripts/views/WatchLater/WatchLater.vue
+++ b/src/contentScripts/views/WatchLater/WatchLater.vue
@@ -263,7 +263,7 @@ function jumpToLoginPage() {
           z--1
         >
           <div
-            absolute w-full h-full backdrop-blur-40px
+            absolute w-full h-full backdrop-blur-40px transform-gpu
             bg="$bew-fill-4"
           />
           <img
diff --git a/src/styles/transitionAndTransitionGroup.scss b/src/styles/transitionAndTransitionGroup.scss
index b9bae206..53742681 100644
--- a/src/styles/transitionAndTransitionGroup.scss
+++ b/src/styles/transitionAndTransitionGroup.scss
@@ -12,7 +12,7 @@
 
 .fade-enter-active,
 .fade-leave-active {
-  --at-apply: transition-opacity duration-500;
+  --at-apply: transition-opacity duration-500 transform-gpu;
 }
 .fade-enter-from,
 .fade-leave-to {
@@ -33,9 +33,9 @@
 
 .modal-enter-active,
 .modal-leave-active {
-  --at-apply: transition-all duration-500;
+  --at-apply: transition-all duration-500 transform-gpu;
 }
 .modal-enter-from,
 .modal-leave-to {
-  --at-apply: opacity-0 scale-105 transform-gpu;
+  --at-apply: opacity-0 scale-105;
 }