From ea845e50495d79f48315c281186a51aa486ae263 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Sat, 2 Aug 2025 09:27:40 +0800
Subject: perf: refactor render-blocking action-menu logic

- put initialization script at the end of the page
- delay initialization furthermore
- delay comment count fetch after giscus iframe is loaded
---
 layouts/_partials/posts/action-menu.html      | 116 ------------------------
 layouts/_partials/scripts.html                |   4 +
 layouts/_partials/scripts/action-menu-js.html | 125 ++++++++++++++++++++++++++
 3 files changed, 129 insertions(+), 116 deletions(-)
 create mode 100644 layouts/_partials/scripts/action-menu-js.html

diff --git a/layouts/_partials/posts/action-menu.html b/layouts/_partials/posts/action-menu.html
index dcc881d3..602004c8 100644
--- a/layouts/_partials/posts/action-menu.html
+++ b/layouts/_partials/posts/action-menu.html
@@ -53,119 +53,3 @@
   color: #8B0000 !important;
 }
 </style>
-
-<script defer>
-// 初始化所有功能
-function initializeFeatures() {
-  const pageId = "{{ .File.UniqueID | urlize }}";
-  console.log(pageId)
-  if (!pageId) return;
-
-  // 评论展开/收起功能
-  initializeComments();
-  // 点赞功能
-  initializeLikes(pageId);
-  // 评论数量获取
-  initializeCommentCount();
-}
-
-// 评论展开/收起功能初始化
-function initializeComments() {
-  const commentsToggle = document.getElementById('comments-toggle');
-  const commentsSection = document.getElementById('comments-section');
-
-  if (commentsToggle && commentsSection) {
-    commentsToggle.addEventListener('click', function() {
-      const isHidden = commentsSection.style.display === 'none';
-      commentsSection.style.display = isHidden ? 'block' : 'none';
-      this.style.background = isHidden ? 'rgba(0, 0, 0, 0.1)' : 'transparent';
-    });
-  }
-}
-
-// 评论数量功能初始化
-function initializeCommentCount() {
-  const commentCountEl = document.getElementById('comment-count');
-  if (!commentCountEl) return;
-
-  commentCountEl.textContent = '0';
-
-  window.addEventListener('message', function(event) {
-    if (event.origin !== 'https://giscus.app') return;
-
-    const giscusData = event.data;
-    if (giscusData.giscus?.discussion) {
-      const discussion = giscusData.giscus.discussion;
-      const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
-      commentCountEl.textContent = totalComments.toString();
-    }
-  });
-}
-
-// 点赞功能初始化
-function initializeLikes(pageId) {
-  const elements = {
-    count: document.getElementById("like-count-" + pageId),
-    btn: document.getElementById("like-btn-" + pageId),
-    container: document.getElementById("like-container-" + pageId),
-    icon: document.getElementById("like-icon-" + pageId)
-  };
-
-  if (!elements.count || !elements.btn || !elements.container) return;
-
-  function updateTooltip() {
-    elements.btn.setAttribute('title',
-      elements.container.classList.contains('liked')
-        ? elements.btn.getAttribute('data-liked-title')
-        : '为这篇文章献上心脏'
-    );
-  }
-
-  function setLikedState() {
-    elements.icon?.classList.add('liked-heart');
-    elements.icon?.classList.add('animate-heart-beat');
-    elements.count?.classList.add('liked-count');
-    elements.btn.disabled = true;
-    elements.container.classList.add('liked');
-    updateTooltip();
-  }
-
-  async function fetchLikes() {
-    try {
-      const response = await fetch("https://like.guhub.cn/like/" + pageId);
-      const data = await response.json();
-      elements.count.innerText = data.likes ?? 0;
-      if (localStorage.getItem("liked_" + pageId)) {
-        setLikedState();
-      }
-    } catch(e) {
-      console.log(e);
-      elements.count.innerText = "❌";
-    }
-  }
-
-  window.sendLike = async function(pageId) {
-    if (localStorage.getItem("liked_" + pageId)) return;
-
-    if (window.location.hostname !== 'localhost' && typeof umami !== 'undefined') {
-      umami.track('👍 Hit Like Button');
-    }
-
-    try {
-      const response = await fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" });
-      const data = await response.json();
-      localStorage.setItem("liked_" + pageId, "1");
-      elements.count.innerText = data.likes ?? 1;
-      setLikedState();
-    } catch(e) {
-      console.log(e);
-      alert("点赞失败，请稍后再试");
-    }
-  };
-
-  fetchLikes();
-}
-
-// 在 DOM 加载完成后初始化所有功能
-document.addEventListener('DOMContentLoaded', initializeFeatures);
-</script>
diff --git a/layouts/_partials/scripts.html b/layouts/_partials/scripts.html
index 6dc0080b..7c000323 100644
--- a/layouts/_partials/scripts.html
+++ b/layouts/_partials/scripts.html
@@ -7,6 +7,10 @@
 {{ partial "scripts/fancybox-js" . }}
 {{ partial "scripts/aplayer-js" . }}
 
+{{ if .File }}
+    {{ partial "scripts/action-menu-js" (.File.UniqueID | urlize) }}
+{{ end }}
+
 {{ with resources.Get "js/tooltip.js" }}
 <script>{{ .Content | safeJS }}</script>
 {{ end }}
diff --git a/layouts/_partials/scripts/action-menu-js.html b/layouts/_partials/scripts/action-menu-js.html
new file mode 100644
index 00000000..66673b71
--- /dev/null
+++ b/layouts/_partials/scripts/action-menu-js.html
@@ -0,0 +1,125 @@
+{{ $pageId := . }}
+<script defer>
+// 初始化所有功能
+function initializeFeatures() {
+  const pageId = "{{ $pageId }}";
+  console.log(pageId)
+  if (!pageId) return;
+
+  // 评论展开/收起功能
+  initializeComments();
+  // 点赞功能
+  initializeLikes(pageId);
+  // 评论数量获取
+  initializeCommentCount();
+}
+
+// 评论展开/收起功能初始化
+function initializeComments() {
+  const commentsToggle = document.getElementById('comments-toggle');
+  const commentsSection = document.getElementById('comments-section');
+
+  if (commentsToggle && commentsSection) {
+    commentsToggle.addEventListener('click', function() {
+      const isHidden = commentsSection.style.display === 'none';
+      commentsSection.style.display = isHidden ? 'block' : 'none';
+      this.style.background = isHidden ? 'rgba(0, 0, 0, 0.1)' : 'transparent';
+    });
+  }
+}
+
+// 评论数量功能初始化
+function initializeCommentCount() {
+  const commentCountEl = document.getElementById('comment-count');
+  const giscusIframe = document.querySelector('iframe.giscus-frame');
+  if (!commentCountEl || !giscusIframe) return;
+
+  commentCountEl.textContent = '0';
+
+  giscusIframe.addEventListener('load', () => {
+    window.addEventListener('message', function(event) {
+      if (event.origin !== 'https://giscus.app') return;
+
+      const giscusData = event.data;
+      if (giscusData.giscus?.discussion) {
+        const discussion = giscusData.giscus.discussion;
+        const totalComments = (discussion.totalCommentCount || 0) + (discussion.totalReplyCount || 0);
+        commentCountEl.textContent = totalComments.toString();
+      }
+    });
+  });
+}
+
+// 点赞功能初始化
+function initializeLikes(pageId) {
+  const elements = {
+    count: document.getElementById("like-count-" + pageId),
+    btn: document.getElementById("like-btn-" + pageId),
+    container: document.getElementById("like-container-" + pageId),
+    icon: document.getElementById("like-icon-" + pageId)
+  };
+
+  if (!elements.count || !elements.btn || !elements.container) return;
+
+  function updateTooltip() {
+    elements.btn.setAttribute('title',
+      elements.container.classList.contains('liked')
+        ? elements.btn.getAttribute('data-liked-title')
+        : '为这篇文章献上心脏'
+    );
+  }
+
+  function setLikedState() {
+    elements.icon?.classList.add('liked-heart');
+    elements.icon?.classList.add('animate-heart-beat');
+    elements.count?.classList.add('liked-count');
+    elements.btn.disabled = true;
+    elements.container.classList.add('liked');
+    updateTooltip();
+  }
+
+  async function fetchLikes() {
+    try {
+      const response = await fetch("https://like.guhub.cn/like/" + pageId);
+      const data = await response.json();
+      elements.count.innerText = data.likes ?? 0;
+      if (localStorage.getItem("liked_" + pageId)) {
+        setLikedState();
+      }
+    } catch(e) {
+      console.log(e);
+      elements.count.innerText = "❌";
+    }
+  }
+
+  window.sendLike = async function(pageId) {
+    if (localStorage.getItem("liked_" + pageId)) return;
+
+    if (window.location.hostname !== 'localhost' && typeof umami !== 'undefined') {
+      umami.track('👍 Hit Like Button');
+    }
+
+    try {
+      const response = await fetch("https://like.guhub.cn/like/" + pageId, { method: "POST" });
+      const data = await response.json();
+      localStorage.setItem("liked_" + pageId, "1");
+      elements.count.innerText = data.likes ?? 1;
+      setLikedState();
+    } catch(e) {
+      console.log(e);
+      alert("点赞失败，请稍后再试");
+    }
+  };
+
+  fetchLikes();
+}
+
+// 在 DOM 加载完成后初始化所有功能
+document.addEventListener('DOMContentLoaded', () => {
+  if ('requestIdleCallback' in window) {
+    requestIdleCallback(initializeFeatures);
+  } else {
+    setTimeout(initializeFeatures, 300);
+  }
+});
+</script>
-- 
cgit v1.2.3