From beb3386edc8a6a2780bfbae5d302ca1834bbc79b Mon Sep 17 00:00:00 2001
From: radishzzz <shuyinsen@gmail.com>
Date: Mon, 19 May 2025 03:12:55 +0100
Subject: [PATCH] perf: optimize dom selectors for better performance

---
 src/components/Button.astro                | 15 ++++++++-------
 src/components/Widgets/BackButton.astro    |  2 +-
 src/components/Widgets/GithubCard.astro    | 14 +++++++-------
 src/components/Widgets/GsapAnimation.astro |  3 ++-
 src/components/Widgets/PhotoSwipe.astro    |  3 ++-
 src/components/Widgets/TOC.astro           |  4 ++--
 src/layouts/Head.astro                     |  2 +-
 src/styles/global.css                      |  2 +-
 src/styles/transition.css                  |  2 +-
 src/utils/feed.ts                          |  2 +-
 10 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index fa282f2..a752c10 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -49,8 +49,9 @@ const nextUrl = useSupportedLangs
 
   <!-- Theme Toggle -->
   <button
+    id="theme-toggle-button"
     aria-label="Switch light/dark theme"
-    class="button-theme-toggle aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
+    class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
   >
     <ThemeToggleIcon
       aria-hidden="true"
@@ -69,7 +70,7 @@ function updateTheme() {
   // Get current theme
   const isDark = document.documentElement.classList.contains('dark')
   // Update meta theme color
-  const metaThemeColor = document.querySelector('meta[name="theme-color"]')
+  const metaThemeColor = document.head.querySelector('meta[name="theme-color"]')
   if (metaThemeColor) {
     metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
   }
@@ -82,10 +83,10 @@ function updateTheme() {
 // Bind click event to the button
 function setupThemeToggle() {
   // Locate theme toggle button
-  const themeToggleButtons = document.querySelectorAll('.button-theme-toggle')
-  // Add click listener to each button
-  themeToggleButtons.forEach((button) => {
-    button.addEventListener('click', () => {
+  const themeToggleButton = document.getElementById('theme-toggle-button')
+  // Add click listener to the button
+  if (themeToggleButton) {
+    themeToggleButton.addEventListener('click', () => {
       // If browser doesn't support View Transitions API, update theme directly
       if (!document.startViewTransition) {
         updateTheme()
@@ -104,7 +105,7 @@ function setupThemeToggle() {
         document.documentElement.removeAttribute('data-theme-changing')
       })
     })
-  })
+  }
 }
 
 // Initialize click event (on first load or page transition)
diff --git a/src/components/Widgets/BackButton.astro b/src/components/Widgets/BackButton.astro
index d9cd711..330c25e 100644
--- a/src/components/Widgets/BackButton.astro
+++ b/src/components/Widgets/BackButton.astro
@@ -5,7 +5,7 @@ import GoBackIcon from '@/assets/icons/go-back.svg';
 <button
   id="back-button"
   class="hidden"
-  lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors ease-out c-secondary active:scale-90! hover:c-primary/80"
+  lg="block absolute c-secondary/40 left--10 top-1/2 aspect-square w-4.5 translate-y--1/2 transition-colors ease-out c-secondary active:scale-90! hover:c-secondary/80"
   aria-label="Go back"
 >
   <GoBackIcon
diff --git a/src/components/Widgets/GithubCard.astro b/src/components/Widgets/GithubCard.astro
index cbe2eb3..e4e15f6 100644
--- a/src/components/Widgets/GithubCard.astro
+++ b/src/components/Widgets/GithubCard.astro
@@ -1,6 +1,6 @@
 <script>
 function setupGithubCards() {
-  const githubCards = document.querySelectorAll('.gc-container')
+  const githubCards = document.getElementsByClassName('gc-container')
   if (githubCards.length === 0)
     return
 
@@ -14,7 +14,7 @@ function setupGithubCards() {
     })
   }, { rootMargin: '400px' })
 
-  githubCards.forEach(card => observer.observe(card))
+  Array.from(githubCards).forEach(card => observer.observe(card))
 }
 
 async function loadCardData(card: HTMLElement) {
@@ -22,11 +22,11 @@ async function loadCardData(card: HTMLElement) {
   if (!repo)
     return
 
-  const avatarEl = card.querySelector('.gc-owner-avatar') as HTMLElement
-  const descEl = card.querySelector('.gc-repo-description') as HTMLElement
-  const starsEl = card.querySelector('.gc-stars-count') as HTMLElement
-  const forksEl = card.querySelector('.gc-forks-count') as HTMLElement
-  const licenseEl = card.querySelector('.gc-license-info') as HTMLElement
+  const avatarEl = card.getElementsByClassName('gc-owner-avatar')[0] as HTMLElement
+  const descEl = card.getElementsByClassName('gc-repo-description')[0] as HTMLElement
+  const starsEl = card.getElementsByClassName('gc-stars-count')[0] as HTMLElement
+  const forksEl = card.getElementsByClassName('gc-forks-count')[0] as HTMLElement
+  const licenseEl = card.getElementsByClassName('gc-license-info')[0] as HTMLElement
 
   try {
     const response = await fetch(`https://api.github.com/repos/${repo}`)
diff --git a/src/components/Widgets/GsapAnimation.astro b/src/components/Widgets/GsapAnimation.astro
index 1be846f..564e5d1 100644
--- a/src/components/Widgets/GsapAnimation.astro
+++ b/src/components/Widgets/GsapAnimation.astro
@@ -3,7 +3,8 @@ import { gsap } from 'gsap'
 
 function setupPostPageAnimation() {
   const allElements = Array.from(document.querySelectorAll('#gsap-post-page-content > *, #gsap-post-page-tags, #waline'))
-  const tocListChildren = Array.from(document.querySelectorAll('#toc-list > *'))
+  const tocList = document.getElementById('toc-list')
+  const tocListChildren = tocList ? Array.from(tocList.children) : []
   const dateElement = document.getElementById('gsap-post-page-date')
   const backButton = document.getElementById('back-button')
   const tocIcon = document.getElementById('toc-icon')
diff --git a/src/components/Widgets/PhotoSwipe.astro b/src/components/Widgets/PhotoSwipe.astro
index a6202a0..ab38628 100644
--- a/src/components/Widgets/PhotoSwipe.astro
+++ b/src/components/Widgets/PhotoSwipe.astro
@@ -10,7 +10,8 @@ function setupPhotoSwipe() {
   if (bodyElement.hasAttribute('data-photoswipe-initialized'))
     return
 
-  const images = document.querySelectorAll('article.heti img')
+  const article = document.querySelector('article.heti')
+  const images = article ? article.getElementsByTagName('img') : []
   if (images.length === 0)
     return
 
diff --git a/src/components/Widgets/TOC.astro b/src/components/Widgets/TOC.astro
index 79f1e29..15fb1d1 100644
--- a/src/components/Widgets/TOC.astro
+++ b/src/components/Widgets/TOC.astro
@@ -154,7 +154,7 @@ function setupTOCHighlight() {
   if (!tocContent)
     return
 
-  const tocLinks = tocContent.querySelectorAll('a')
+  const tocLinks = tocContent.getElementsByTagName('a')
   if (tocLinks.length === 0)
     return
 
@@ -163,7 +163,7 @@ function setupTOCHighlight() {
 
   // Build mapping from heading IDs to TOC links
   const headingMap = new Map<string, HTMLAnchorElement>()
-  tocLinks.forEach((link) => {
+  Array.from(tocLinks).forEach((link) => {
     const id = link.getAttribute('href')?.substring(1)
     if (id)
       headingMap.set(id, link as HTMLAnchorElement)
diff --git a/src/layouts/Head.astro b/src/layouts/Head.astro
index 71c94a6..f7613d8 100644
--- a/src/layouts/Head.astro
+++ b/src/layouts/Head.astro
@@ -112,7 +112,7 @@ function isCurrentDark() {
 function initTheme(doc = document) {
   const isDark = isCurrentDark()
   doc.documentElement.classList.toggle('dark', isDark)
-  const metaTheme = doc.querySelector('meta[name="theme-color"]')
+  const metaTheme = doc.head.querySelector('meta[name="theme-color"]')
   if (metaTheme) {
     metaTheme.setAttribute('content', isDark ? darkMode : lightMode)
   }
diff --git a/src/styles/global.css b/src/styles/global.css
index a37c55d..b82c8dc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -61,7 +61,7 @@ h4:hover .heading-anchor-link svg:hover {
   --at-apply: 'origin-bottom-left scale-x-100';
 }
 .highlight-hover::after {
-  --at-apply: 'origin-bottom-right scale-x-0 transition-transform duration-150 ease-out lg:duration-225';
+  --at-apply: 'origin-bottom-right scale-x-0 transition-transform ease-out lg:duration-225';
 }
 
 /* Fix Highlight Position Issue on iOS */
diff --git a/src/styles/transition.css b/src/styles/transition.css
index 17e0078..f4a7c80 100644
--- a/src/styles/transition.css
+++ b/src/styles/transition.css
@@ -1,6 +1,6 @@
 /* View Transition */
 ::view-transition-new(animation-theme-toggle) {
-  animation: reveal 0.75s cubic-bezier(0.645, 0.045, 0.355, 1);
+  animation: reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1);
   clip-path: inset(0 0 0 0);
   z-index: 99;
 }
diff --git a/src/utils/feed.ts b/src/utils/feed.ts
index ba9540c..aa762b4 100644
--- a/src/utils/feed.ts
+++ b/src/utils/feed.ts
@@ -54,7 +54,7 @@ const getOptimizedImageUrl = memoize(async (srcPath: string, baseUrl: string) =>
  */
 async function fixRelativeImagePaths(htmlContent: string, baseUrl: string): Promise<string> {
   const htmlDoc = htmlParser(htmlContent)
-  const images = htmlDoc.querySelectorAll('img')
+  const images = htmlDoc.getElementsByTagName('img')
   const imagePromises = []
 
   for (const img of images) {