taiko-web-2026/.trae/documents/Loading Progress, Timeout, and Bandwidth Optimization.md

加载体验优化与带宽节省方案

我将分两步实施您的需求，重点解决宽带占用问题和优化加载反馈。

第一步：宽带占用优化（核心：实现请求中止）

目标：当用户在歌曲列表中切换或确认选歌时，强制切断之前正在进行的预览音频下载，将带宽瞬间释放给当前操作。

涉及文件：abstractfile.js, loader.js, songselect.js

1. 改造底层请求 (abstractfile.js, loader.js)：

   • 修改 RemoteFile 类，使其能够持有并控制底层的 XMLHttpRequest 对象。
   • 实现 abort() 方法：当调用时，直接触发 xhr.abort() 中断网络连接。
   • 优化 loader.ajax：确保请求被中止（Abort）时，Promise 能够被正确处理，不会在控制台抛出无关的错误报错。

2. 选歌逻辑拦截 (songselect.js)：

   • 在 SongSelect 类中引入机制来追踪当前正在下载的预览音频。
   • 关键动作：每当用户移动光标（moveToSong）或按下确认键（confirm）时，立即调用上一首歌曲文件的 abort() 方法。
   • 这将确保“非加载用户所选”的进程被立刻停止，实现您要求的“转而加载用户加载的歌曲”。

第二步：加载界面升级（百分比与超时提醒）

目标：让用户直观看到加载进度，并在卡死时提供解决方案。

涉及文件：loadsong.js, loadsong.html, loadsong.css

1. UI 界面改造 (loadsong.html, loadsong.css)：

   • 在加载界面的小咚动画下方添加一个明显的百分比数字显示（例如 0% -> 100%）。
   • 调整 CSS 样式，确保文字清晰、美观，且不遮挡原有动画。

2. 进度与超时逻辑 (loadsong.js)：

   • 进度计算：统计本次选歌需要加载的文件总数（音频、谱面、背景图等）。每完成一个文件的加载，实时更新界面上的百分比数值。
   • 超时救援：设置一个 30秒 的安全计时器。
     • 如果 30秒 后游戏仍未开始，将“加载中...”的提示修改为“加载超时，建议刷新网页”，并提供显眼的刷新操作指引。
     • 这能有效解决用户看着 0% 不知道是卡死还是慢的问题。

第三步：验证

• 通过网络面板确认快速切歌时旧请求变为 cancelled 状态。
• 验证加载界面的百分比数字跳动流畅。
• 模拟超时情况，确认提示信息正确显示。