优化一下博客的性能

themes/Ying/layouts/page/circles.html

@@ -337,6 +337,15 @@
       allPosts: [],
       currentIndex: 0,
       BATCH_SIZE: 10,
+      CACHE_KEY: 'friend-circle-v1',
+      CACHE_OPTIONS: {
+        version: 2,
+        softTtl: 5 * 60 * 1000,
+        hardTtl: 60 * 60 * 1000,
+        validate: function(data) {
+          return !!data && Array.isArray(data.posts);
+        }
+      },
 
       timeAgo: function (dateStr) {
         const date = new Date(dateStr);
@@ -403,6 +412,74 @@
         });
       },
 
+      renderEmpty: function () {
+        const container = document.getElementById("friend-circle-container");
+        if (!container) return;
+        container.innerHTML = '<div class="empty" style="grid-column: 1/-1; text-align:center; padding:20px;">暂无动态</div>';
+      },
+
+      renderError: function () {
+        const container = document.getElementById("friend-circle-container");
+        if (!container) return;
+        container.innerHTML = '<div class="error" style="grid-column: 1/-1; text-align:center; padding:20px; color:#d9534f;">加载失败，请稍后刷新重试</div>';
+      },
+
+      applyData: function (data) {
+        const container = document.getElementById("friend-circle-container");
+        if (!container) return;
+
+        if (!data.posts || data.posts.length === 0) {
+          this.renderEmpty();
+          return;
+        }
+
+        window.FriendCircle.allPosts = data.posts;
+        window.fcUpdateTime = new Date(data.updated).toLocaleString();
+        window.FriendCircle.currentIndex = 0;
+        container.innerHTML = "";
+        window.FriendCircle.loadMore();
+      },
+
+      fetchData: function () {
+        if (window.BrowserCache && typeof window.BrowserCache.log === 'function') {
+          window.BrowserCache.log('[FriendCircleCache][fetch]', {
+            key: window.BrowserCache ? window.BrowserCache.buildKey(window.FriendCircle.CACHE_KEY) : window.FriendCircle.CACHE_KEY,
+            softTtl: window.BrowserCache ? window.BrowserCache.formatDuration(window.FriendCircle.CACHE_OPTIONS.softTtl) : window.FriendCircle.CACHE_OPTIONS.softTtl,
+            hardTtl: window.BrowserCache ? window.BrowserCache.formatDuration(window.FriendCircle.CACHE_OPTIONS.hardTtl) : window.FriendCircle.CACHE_OPTIONS.hardTtl
+          });
+        }
+        return fetch("https://rssapi.usj.cc/api/articles?limit=50")
+          .then(function(res) {
+            if (!res.ok) throw new Error("Network response was not ok");
+            return res.json();
+          })
+          .then(function(apiData) {
+            const posts = (apiData.articles || []).map(function(a) {
+              return {
+                title: a.title || '',
+                link: a.link || '',
+                date: a.pubDate || '',
+                author: a.feedName || a.author || '',
+                avatar: a.favicon || '',
+                blogUrl: a.siteUrl || '',
+                image: null,
+                description: ''
+              };
+            });
+
+            const data = {
+              posts: posts,
+              updated: apiData.timestamp || new Date().toISOString()
+            };
+
+            if (window.BrowserCache) {
+              window.BrowserCache.write(window.FriendCircle.CACHE_KEY, window.FriendCircle.CACHE_OPTIONS, data);
+            }
+
+            return data;
+          });
+      },
+
       initTooltip: function() {
         if (this.tooltipInitialized) return;
         this.tooltipInitialized = true;
@@ -476,42 +553,35 @@
         if (this.isFetching) return;
         this.isFetching = true;
 
-        // 从 RSS API 拉取按时间排序的文章
-        fetch("https://rssapi.usj.cc/api/articles?limit=50&t=" + new Date().getTime())
-          .then(function(res) {
-            if (!res.ok) throw new Error("Network response was not ok");
-            return res.json();
-          })
-          .then(function(apiData) {
-            // 将 API 格式转换为友圈格式
-            const posts = (apiData.articles || []).map(function(a) {
-              return {
-                title: a.title || '',
-                link: a.link || '',
-                date: a.pubDate || '',
-                author: a.feedName || a.author || '',
-                avatar: a.favicon || '',
-                blogUrl: a.siteUrl || '',
-                image: null,
-                description: ''
-              };
+        const cached = window.BrowserCache && window.BrowserCache.read(this.CACHE_KEY, this.CACHE_OPTIONS);
+        if (cached) {
+          if (window.BrowserCache && typeof window.BrowserCache.log === 'function') {
+            window.BrowserCache.log('[FriendCircleCache][render]', {
+              key: cached.key,
+              age: cached.ageText,
+              isFresh: cached.isFresh,
+              softTtl: cached.softTtlText,
+              hardTtl: cached.hardTtlText
             });
-            const data = { posts: posts, updated: apiData.timestamp || new Date().toISOString() };
+          }
+          this.applyData(cached.data);
+          if (cached.isFresh) {
+            this.isFetching = false;
+            return;
+          }
+        }
 
-            if (!data.posts || data.posts.length === 0) {
-              container.innerHTML = '<div class="empty" style="grid-column: 1/-1; text-align:center; padding:20px;">暂无动态</div>';
-              return;
-            }
-
-            window.FriendCircle.allPosts = data.posts;
-            window.fcUpdateTime = new Date(data.updated).toLocaleString();
-            window.FriendCircle.currentIndex = 0;
-            container.innerHTML = "";
-            window.FriendCircle.loadMore();
+        this.fetchData()
+          .then(function(data) {
+            window.FriendCircle.applyData(data);
           })
           .catch(function(err) {
-            console.error("Friend Circle Error:", err);
-            container.innerHTML = '<div class="error" style="grid-column: 1/-1; text-align:center; padding:20px; color:#d9534f;">加载失败，请稍后刷新重试</div>';
+            if (window.BrowserCache && window.BrowserCache.isDebug && window.BrowserCache.isDebug()) {
+              console.error("Friend Circle Error:", err);
+            }
+            if (!cached) {
+              window.FriendCircle.renderError();
+            }
           })
           .finally(function() {
             window.FriendCircle.isFetching = false;
@@ -519,12 +589,18 @@
       }
     };
 
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", function() {
+    function initFriendCirclePage() {
+      if (window.FriendCircle && typeof window.FriendCircle.init === 'function') {
         window.FriendCircle.init();
-      });
+      }
+    }
+
+    document.addEventListener('pjax:complete', initFriendCirclePage);
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", initFriendCirclePage);
     } else {
-      window.FriendCircle.init();
+      initFriendCirclePage();
     }
   </script>
 </div>