优化聊天室首屏和在线名单性能

2026-04-25 03:14:07 +08:00
parent c410897231
commit 128b52d0aa
8 changed files with 166 additions and 27 deletions
@@ -806,8 +806,8 @@
        }
    });

-    /** 页面加载时：检查是否有进行中的局，有则自动恢复面板 */
-    document.addEventListener('DOMContentLoaded', async () => {
+    /** 页面空闲时：检查是否有进行中的局，有则自动恢复面板 */
+    document.addEventListener('DOMContentLoaded', () => window.deferChatGameBootstrap(async () => {
        try {
            // 先加载历史趋势
            const histRes = await fetch('/baccarat/history');
@@ -859,5 +859,5 @@
        } catch (e) {
            console.warn('[百家乐] 初始化失败', e);
        }
-    });
+    }));
 </script>
@@ -355,7 +355,7 @@
    }

    /** 页面加载时：检查游戏是否开启，若开启则初始化面板数据 */
-    document.addEventListener('DOMContentLoaded', async () => {
+    document.addEventListener('DOMContentLoaded', () => window.deferChatGameBootstrap(async () => {
        try {
            const res = await fetch('/fortune/today');
            const data = await res.json();
@@ -374,5 +374,5 @@
        } catch (e) {
            console.warn('[神秘占卜] 初始化失败', e);
        }
-    });
+    }));
 </script>
@@ -93,6 +93,11 @@
     * 游戏大厅模块（使用 IIFE 隔离全局作用域，防止 const 重复初始化导致脚本块失败）
     */
    (function() {
+        /** 游戏大厅状态短缓存，避免用户频繁开关弹窗时重复打多个状态接口 */
+        const GAME_HALL_CACHE_TTL = 15000;
+        let gameHallStatusCache = null;
+        let gameHallStatusCacheAt = 0;
+
        /** 游戏大厅配置定义（ID → 展示配置） */
        const GAME_HALL_GAMES = [{
                id: 'baccarat',
@@ -399,7 +404,29 @@
                jjbEl.textContent = Number(window.chatContext.userJjb).toLocaleString();
            }

-            // 每次打开均实时拉取后台开关状态（避免页面不刷新时开关不同步）
+            const { enabledGames, statuses } = await loadGameHallStatus();
+
+            try {
+                renderGameCards(enabledGames, statuses);
+            } catch (err) {
+                console.error('[游戏大厅] 渲染游戏卡片失败:', err);
+                document.getElementById('game-hall-loading').style.display = 'none';
+                document.getElementById('game-hall-empty').style.display = 'block';
+            }
+        };
+
+        /**
+         * 加载游戏大厅状态，短时间内复用结果以减少重复请求。
+         *
+         * @returns {Promise<{enabledGames:Array, statuses:Object}>}
+         */
+        async function loadGameHallStatus() {
+            const now = Date.now();
+            if (gameHallStatusCache && now - gameHallStatusCacheAt < GAME_HALL_CACHE_TTL) {
+                return gameHallStatusCache;
+            }
+
+            // 打开大厅时拉取后台开关状态；短缓存能兼顾配置同步和重复打开速度。
            let enabledMap = window.GAME_ENABLED ?? {};
            try {
                const r = await fetch('/games/enabled', {
@@ -428,14 +455,11 @@
                })
            );

-            try {
-                renderGameCards(enabledGames, statuses);
-            } catch (err) {
-                console.error('[游戏大厅] 渲染游戏卡片失败:', err);
-                document.getElementById('game-hall-loading').style.display = 'none';
-                document.getElementById('game-hall-empty').style.display = 'block';
-            }
-        };
+            gameHallStatusCache = { enabledGames, statuses };
+            gameHallStatusCacheAt = Date.now();
+
+            return gameHallStatusCache;
+        }

        /**
         * 关闭游戏大厅弹窗
@@ -792,7 +792,7 @@
    });

    /** 页面加载时恢复进行中的场次 */
-    document.addEventListener('DOMContentLoaded', async () => {
+    document.addEventListener('DOMContentLoaded', () => window.deferChatGameBootstrap(async () => {
        try {
            const panel = document.getElementById('horse-race-panel');
            const histData = panel ? await Alpine.$data(panel).requestJson('/horse-race/history') : { history: [] };
@@ -846,5 +846,5 @@
        } catch (e) {
            console.warn('[赛马] 初始化失败', e);
        }
-    });
+    }));
 </script>