優化網站在禁用硬體加速時的性能表現 | Optimize Website Performance When Hardware Acceleration is Disabled

[Yuuzi261]

問題描述

本網站在部分瀏覽器（尤其是 Google Chrome）中關閉「硬體加速」功能後，會出現明顯的性能下降問題。主要體現在頁面滾動卡頓、Modal 彈窗動畫掉幀、以及整體操作流暢度不足。

我們希望能有社群的夥伴幫助我們診斷並優化這個問題，讓網站在不依賴硬體加速的情況下也能有流暢的體驗。

重現問題的步驟

1. 在 Google Chrome 中打開本站。
2. 在網址列輸入 chrome://settings/system 並前往。
3. 關閉「使用圖形加速功能(如果可用) (Use graphics acceleration when available)」選項。
4. 重啟瀏覽器。
5. 瀏覽網站，特別是進行以下操作時，可以觀察到明顯的卡頓和掉幀：
   • 上下滾動角色列表。
   • 點擊角色卡片，觸發 Modal 彈出和關閉動畫。

預期的行為

即使在禁用硬體加速的情況下，網站也應保持可接受的流暢度，滾動和動畫不應出現嚴重掉幀。

尋求幫助 (Help Wanted)

我們正在尋找熟悉前端性能優化的大佬來幫助我們解決這個問題。可能的優化方向包括但不限於：

• 檢查並替換在沒有 GPU 加速時性能開銷較大的 CSS 屬性。
• 優化 JavaScript 的執行效率，減少重繪和重排。
• 尋找更輕量、對 CPU 更友好的動畫實現方案。

如果您有相關經驗或任何建議，歡迎您提出 PR 或在下方留言討論。非常感謝！

---

Problem Description

The website experiences significant performance degradation when the "Hardware Acceleration" feature is disabled in some browsers, especially in Google Chrome. This is most noticeable in laggy page scrolling, frame drops during modal pop-up animations, and a general lack of operational smoothness.

We are looking for community contributors to help us diagnose and optimize this issue to ensure a smooth experience even without hardware acceleration.

Steps to Reproduce

1. Open the website in Google Chrome.
2. Navigate to chrome://settings/system in the address bar.
3. Turn off the "Use graphics acceleration when available" option.
4. Relaunch the browser.
5. Browse the site and perform the following actions to observe noticeable lag and frame drops:
   • Scroll up and down the character list.
   • Click on a character card to trigger the modal's open/close animation.

Expected Behavior

The website should remain reasonably smooth and responsive even without hardware acceleration. Scrolling and animations should not suffer from severe frame drops.

Help Wanted

We are seeking contributors experienced in front-end performance optimization to help us resolve this issue. Potential areas for investigation could include, but are not limited to:

• Identifying and replacing CSS properties that are computationally expensive without GPU acceleration.
• Optimizing JavaScript execution efficiency to reduce repaints and reflows.
• Exploring more lightweight, CPU-friendly animation techniques.

If you have relevant experience or any suggestions, please feel free to submit a PR or leave a comment below for discussion. Thank you very much!