From 15e93841c0063375d55fb9d1f832761699425ba0 Mon Sep 17 00:00:00 2001
From: the3ash <24548223+the3ash@users.noreply.github.com>
Date: Thu, 15 Jan 2026 10:28:07 +0800
Subject: [PATCH] perf: optimize event listeners and async operations

---
 src/components/ui/BackButton.astro           |  8 ++---
 src/components/ui/CopyCode.astro             |  2 +-
 src/components/ui/FaviconThemeSwitcher.astro | 13 +++-----
 src/components/ui/GradientMask.astro         | 28 +++++++++++++---
 src/components/ui/ImageOptimizer.astro       | 11 +++---
 src/components/ui/ImageViewer.astro          | 25 +++++++-------
 src/components/ui/NeoDBCard.astro            | 35 ++++++++++----------
 src/components/ui/ThemeToggle.astro          | 25 ++++++--------
 src/components/ui/XPOST.astro                | 21 ++++++++----
 src/components/widgets/FootnoteScroll.astro  | 13 ++++----
 10 files changed, 100 insertions(+), 81 deletions(-)

diff --git a/src/components/ui/BackButton.astro b/src/components/ui/BackButton.astro
index 0d9f41d..17ec908 100644
--- a/src/components/ui/BackButton.astro
+++ b/src/components/ui/BackButton.astro
@@ -62,12 +62,8 @@ import { themeConfig } from '@/config'
 
     adjustBackButtonPosition()
 
-    document.addEventListener('astro:page-load', () => {
-      adjustBackButtonPosition()
-    })
-    document.addEventListener('DOMContentLoaded', () => {
-      adjustBackButtonPosition()
-    })
+    // Use only astro:page-load as it fires on initial load and navigation
+    document.addEventListener('astro:page-load', adjustBackButtonPosition)
     window.addEventListener('resize', adjustBackButtonPosition)
   })()
 </script>
diff --git a/src/components/ui/CopyCode.astro b/src/components/ui/CopyCode.astro
index 08ab9a7..16b1571 100644
--- a/src/components/ui/CopyCode.astro
+++ b/src/components/ui/CopyCode.astro
@@ -134,8 +134,8 @@ import { themeConfig } from '@/config'
     })
   }
 
+  // Use only astro:page-load as it fires on initial load and navigation
   document.addEventListener('astro:page-load', initCopyCode)
-  document.addEventListener('DOMContentLoaded', initCopyCode)
 </script>
 
 <style is:inline>
diff --git a/src/components/ui/FaviconThemeSwitcher.astro b/src/components/ui/FaviconThemeSwitcher.astro
index d9501db..b6df6c6 100644
--- a/src/components/ui/FaviconThemeSwitcher.astro
+++ b/src/components/ui/FaviconThemeSwitcher.astro
@@ -84,7 +84,11 @@
   }
 
   // Initialize favicon theme switcher
+  let faviconSwitcherInitialized = false
   function init() {
+    if (faviconSwitcherInitialized) return
+    faviconSwitcherInitialized = true
+
     try {
       new FaviconThemeSwitcher()
     } catch (error) {
@@ -92,13 +96,6 @@
     }
   }
 
-  // Initialize when DOM is ready
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', init)
-  } else {
-    init()
-  }
-
-  // Re-initialize on Astro page loads
+  // Use only astro:page-load as it fires on initial load and navigation
   document.addEventListener('astro:page-load', init)
 </script>
diff --git a/src/components/ui/GradientMask.astro b/src/components/ui/GradientMask.astro
index b1cdeed..db98985 100644
--- a/src/components/ui/GradientMask.astro
+++ b/src/components/ui/GradientMask.astro
@@ -3,8 +3,15 @@
 </div>
 
 <script>
+  let mask: HTMLElement | null = null
+  let ticking = false
+
   function updateMask() {
-    const mask = document.querySelector('.gradient-mask') as HTMLElement
+    if (!mask) {
+      mask = document.querySelector('.gradient-mask') as HTMLElement
+    }
+    if (!mask) return
+
     const threshold = 64
     const scrollY = window.scrollY
 
@@ -15,10 +22,23 @@
     }
   }
 
-  document.addEventListener('DOMContentLoaded', () => {
+  function onScroll() {
+    if (ticking) return
+    ticking = true
+    requestAnimationFrame(() => {
+      updateMask()
+      ticking = false
+    })
+  }
+
+  function initGradientMask() {
+    mask = document.querySelector('.gradient-mask') as HTMLElement
     updateMask()
-    window.addEventListener('scroll', updateMask)
-  })
+  }
+
+  // Use only astro:page-load as it fires on initial load and navigation
+  document.addEventListener('astro:page-load', initGradientMask)
+  window.addEventListener('scroll', onScroll, { passive: true })
 </script>
 
 <style>
diff --git a/src/components/ui/ImageOptimizer.astro b/src/components/ui/ImageOptimizer.astro
index 5c29c9b..316d552 100644
--- a/src/components/ui/ImageOptimizer.astro
+++ b/src/components/ui/ImageOptimizer.astro
@@ -5,16 +5,17 @@
       if (img.complete) {
         img.classList.remove('img-placeholder')
       } else {
+        // Skip if already bound
+        if (img.dataset.placeholderBound) return
+        img.dataset.placeholderBound = 'true'
+
         img.addEventListener('load', function () {
           img.classList.remove('img-placeholder')
         })
       }
     })
   }
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', removeImgPlaceholder)
-  } else {
-    removeImgPlaceholder()
-  }
+
+  // Use only astro:page-load as it fires on initial load and navigation
   document.addEventListener('astro:page-load', removeImgPlaceholder)
 </script>
diff --git a/src/components/ui/ImageViewer.astro b/src/components/ui/ImageViewer.astro
index 282b1fc..a15d590 100644
--- a/src/components/ui/ImageViewer.astro
+++ b/src/components/ui/ImageViewer.astro
@@ -85,25 +85,24 @@
 
     bindImageClickEvents()
 
-    const observer = new MutationObserver(() => {
-      bindImageClickEvents()
-    })
+    // Observe only the content area instead of the entire body
+    const contentArea = document.querySelector('.prose') || document.querySelector('.content') || document.querySelector('article')
+    if (contentArea) {
+      const observer = new MutationObserver(() => {
+        bindImageClickEvents()
+      })
 
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true
-    })
+      observer.observe(contentArea, {
+        childList: true,
+        subtree: true
+      })
+    }
 
     // Hide initially
     viewer!.style.visibility = 'hidden'
   }
 
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initImageViewer)
-  } else {
-    initImageViewer()
-  }
-
+  // Use only astro:page-load as it fires on initial load and navigation
   document.addEventListener('astro:page-load', initImageViewer)
 </script>
 
diff --git a/src/components/ui/NeoDBCard.astro b/src/components/ui/NeoDBCard.astro
index 05a0a0c..23ee984 100644
--- a/src/components/ui/NeoDBCard.astro
+++ b/src/components/ui/NeoDBCard.astro
@@ -151,7 +151,8 @@
       `
     }
 
-    containers.forEach((container) => {
+    // Build fetch promises for parallel execution
+    const fetchPromises = Array.from(containers).map(async (container) => {
       const url = container.getAttribute('data-url')
 
       if (!url) return
@@ -178,27 +179,27 @@
       }
 
       if (fetchUrl) {
-        fetch(fetchUrl, {
-          mode: 'cors',
-          headers: {
-            Accept: 'application/json'
-          }
-        })
-          .then((res) => {
-            if (!res.ok) throw new Error(`Response ${res.status}`)
-            return res.json()
-          })
-          .then((json) => {
-            const data = json.data ? json.data : json
-            renderCard(container, data, url)
-          })
-          .catch(() => {
-            renderError(container)
+        try {
+          const res = await fetch(fetchUrl, {
+            mode: 'cors',
+            headers: {
+              Accept: 'application/json'
+            }
           })
+          if (!res.ok) throw new Error(`Response ${res.status}`)
+          const json = await res.json()
+          const data = json.data ? json.data : json
+          renderCard(container, data, url)
+        } catch {
+          renderError(container)
+        }
       } else {
         renderError(container)
       }
     })
+
+    // Execute all fetches in parallel
+    Promise.allSettled(fetchPromises)
   }
 
   loadNeoDBCards()
diff --git a/src/components/ui/ThemeToggle.astro b/src/components/ui/ThemeToggle.astro
index 0ff5f0c..f13ffbe 100644
--- a/src/components/ui/ThemeToggle.astro
+++ b/src/components/ui/ThemeToggle.astro
@@ -14,23 +14,20 @@ import { themeConfig } from '@/config'
 <script is:inline>
   function bindThemeToggle() {
     const themeToggle = document.getElementById('theme-toggle')
-    if (themeToggle && window.ThemeManager) {
-      // Remove existing event listeners to prevent duplicates
-      const newToggle = themeToggle.cloneNode(true)
-      themeToggle.parentNode.replaceChild(newToggle, themeToggle)
+    if (!themeToggle || !window.ThemeManager) return
 
-      newToggle.addEventListener('click', function (e) {
-        e.preventDefault()
-        e.stopPropagation()
-        window.ThemeManager.toggle()
-      })
-    }
-  }
+    // Skip if already bound
+    if (themeToggle.dataset.themeBound) return
+    themeToggle.dataset.themeBound = 'true'
 
-  // Bind on initial load
-  window.addEventListener('DOMContentLoaded', bindThemeToggle)
+    themeToggle.addEventListener('click', function (e) {
+      e.preventDefault()
+      e.stopPropagation()
+      window.ThemeManager.toggle()
+    })
+  }
 
-  // Bind on Astro page transitions
+  // Use only astro:page-load as it fires on initial load and navigation
   document.addEventListener('astro:page-load', bindThemeToggle)
 </script>
 
diff --git a/src/components/ui/XPOST.astro b/src/components/ui/XPOST.astro
index f8d27ab..ce84ec0 100644
--- a/src/components/ui/XPOST.astro
+++ b/src/components/ui/XPOST.astro
@@ -12,14 +12,23 @@
       element.setAttribute('data-theme', isDark ? 'dark' : 'light')
     })
 
-    const script = document.createElement('script')
-    script.src = 'https://platform.twitter.com/widgets.js'
-    script.async = true
-    document.head.appendChild(script)
-  }
+    // Defer loading of Twitter script to avoid blocking main thread
+    const loadTwitterScript = () => {
+      const script = document.createElement('script')
+      script.src = 'https://platform.twitter.com/widgets.js'
+      script.async = true
+      document.head.appendChild(script)
+    }
 
-  document.addEventListener('DOMContentLoaded', loadXCards)
+    // Use requestIdleCallback if available, otherwise use setTimeout
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(loadTwitterScript, { timeout: 2000 })
+    } else {
+      setTimeout(loadTwitterScript, 100)
+    }
+  }
 
+  // Use only astro:page-load as it fires on initial load and navigation
   document.addEventListener('astro:page-load', loadXCards)
 </script>
 
diff --git a/src/components/widgets/FootnoteScroll.astro b/src/components/widgets/FootnoteScroll.astro
index baba037..2dc9497 100644
--- a/src/components/widgets/FootnoteScroll.astro
+++ b/src/components/widgets/FootnoteScroll.astro
@@ -3,6 +3,10 @@
     const footnoteLinks = document.querySelectorAll('[data-footnote-ref], [data-footnote-backref]')
 
     footnoteLinks.forEach((link) => {
+      // Skip if already bound
+      if (link.dataset.footnoteBound) return
+      link.dataset.footnoteBound = 'true'
+
       link.addEventListener('click', (e) => {
         e.preventDefault()
         const href = link.getAttribute('href')
@@ -34,11 +38,6 @@
     })
   }
 
-  document.addEventListener('astro:page-load', () => {
-    bindFootnoteEvents()
-  })
-
-  document.addEventListener('DOMContentLoaded', () => {
-    bindFootnoteEvents()
-  })
+  // Use only astro:page-load as it fires on initial load and navigation
+  document.addEventListener('astro:page-load', bindFootnoteEvents)
 </script>
-- 
2.51.2