perf: optimize katex config, implement async css loading for katex, improve scrollbar and lightbox loading logic

src/components/Widgets/BackToTop.astro

@@ -60,18 +60,6 @@ function initBackToTop() {
   })
 }
 
-function cleanup() {
-  // Cleanup observer
-  if (observer) {
-    observer.disconnect()
-    observer = null
-  }
-
-  // Remove event listeners
-  backToTopButton = null
-}
-
 // Handle page transitions
 document.addEventListener('astro:page-load', initBackToTop)
-document.addEventListener('astro:before-swap', cleanup)
 </script>

src/components/Widgets/GithubCard.astro

@@ -11,7 +11,7 @@ function setupGithubCards() {
         observer.unobserve(entry.target)
       }
     })
-  }, { rootMargin: '200px' })
+  }, { rootMargin: '400px' })
 
   githubCards.forEach(card => observer.observe(card))
 }

src/components/Widgets/PhotoSwipe.astro

@@ -53,11 +53,13 @@ function setupPhotoSwipe() {
 }
 
 function lazySetupPhotoSwipe() {
-  if ('requestIdleCallback' in window) {
+  if (typeof window.requestIdleCallback === 'function') {
     window.requestIdleCallback(() => setupPhotoSwipe(), { timeout: 1000 })
   }
   else {
-    setTimeout(setupPhotoSwipe, 100)
+    requestAnimationFrame(() => {
+      setupPhotoSwipe()
+    })
   }
 }
 

src/components/Widgets/Scrollbar.astro

@@ -24,43 +24,54 @@ function setupScrollbar() {
     bodyElement.setAttribute('data-scrollbar-initialized', 'true')
   }
 
-  // Add scrollbar to code blocks
-  const preElements = document.querySelectorAll('pre')
-  preElements.forEach((pre) => {
-    if (!pre.hasAttribute('data-scrollbar-initialized')) {
+  const setupSecondaryScrollbars = () => {
+    // Add scrollbar to TOC content
+    const tocElement = document.getElementById('toc-content')
+    if (tocElement && !tocElement.hasAttribute('data-scrollbar-initialized')) {
       OverlayScrollbars({
-        target: pre,
+        target: tocElement,
       }, {
         scrollbars: {
           theme: 'scrollbar-widget',
-          autoHide: 'leave',
-          autoHideDelay: 500,
+          autoHide: 'never',
         },
         overflow: {
-          y: 'hidden',
+          x: 'hidden',
         },
       })
 
-      pre.setAttribute('data-scrollbar-initialized', 'true')
+      tocElement.setAttribute('data-scrollbar-initialized', 'true')
     }
-  })
 
-  // Add scrollbar to TOC content
-  const tocElement = document.getElementById('toc-content')
-  if (tocElement && !tocElement.hasAttribute('data-scrollbar-initialized')) {
-    OverlayScrollbars({
-      target: tocElement,
-    }, {
-      scrollbars: {
-        theme: 'scrollbar-widget',
-        autoHide: 'never',
-      },
-      overflow: {
-        x: 'hidden',
-      },
+    // Add scrollbar to code blocks
+    const preElements = document.querySelectorAll('pre')
+    preElements.forEach((pre) => {
+      if (!pre.hasAttribute('data-scrollbar-initialized')) {
+        OverlayScrollbars({
+          target: pre,
+        }, {
+          scrollbars: {
+            theme: 'scrollbar-widget',
+            autoHide: 'leave',
+            autoHideDelay: 500,
+          },
+          overflow: {
+            y: 'hidden',
+          },
+        })
+
+        pre.setAttribute('data-scrollbar-initialized', 'true')
+      }
     })
+  }
 
-    tocElement.setAttribute('data-scrollbar-initialized', 'true')
+  if (typeof window.requestIdleCallback === 'function') {
+    window.requestIdleCallback(setupSecondaryScrollbars, { timeout: 1000 })
+  }
+  else {
+    requestAnimationFrame(() => {
+      setupSecondaryScrollbars()
+    })
   }
 }
 

src/layouts/Head.astro

@@ -54,7 +54,7 @@ const pageImage = postSlug
 <link rel="preload" href="/fonts/EarlySummer-Subset.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/fonts/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/fonts/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin />
-{katex && <link rel="stylesheet" href={katexCSS} />}
+{katex && <link rel="preload" href={katexCSS} as="style" onload="this.onload=null;this.rel='stylesheet'" />}
 {commentURL && <link rel="preconnect" href={commentURL} crossorigin />}
 {commentURL && <link rel="dns-prefetch" href={commentURL} />}
 <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS Feed" />