perf: optimize dom selectors for better performance

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')
+  const themeToggleButton = document.getElementById('theme-toggle-button')
-  // Add click listener to each button
+  // Add click listener to the button
-  themeToggleButtons.forEach((button) => {
+  if (themeToggleButton) {
-    button.addEventListener('click', () => {
+    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)

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

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 avatarEl = card.getElementsByClassName('gc-owner-avatar')[0] as HTMLElement
-  const descEl = card.querySelector('.gc-repo-description') as HTMLElement
+  const descEl = card.getElementsByClassName('gc-repo-description')[0] as HTMLElement
-  const starsEl = card.querySelector('.gc-stars-count') as HTMLElement
+  const starsEl = card.getElementsByClassName('gc-stars-count')[0] as HTMLElement
-  const forksEl = card.querySelector('.gc-forks-count') as HTMLElement
+  const forksEl = card.getElementsByClassName('gc-forks-count')[0] as HTMLElement
-  const licenseEl = card.querySelector('.gc-license-info') as HTMLElement
+  const licenseEl = card.getElementsByClassName('gc-license-info')[0] as HTMLElement
 
   try {
     const response = await fetch(`https://api.github.com/repos/${repo}`)

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

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
 

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)

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

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 */

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;
 }

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