Closed TKanX closed 1 month ago
I have completed a performance recording to analyze the issues with game performance. The recording includes details on where the performance degrades and potential bottlenecks.
Timeline Spikes: Look for any sudden spikes in activity on the timeline that might indicate performance issues. Frame Rate: Check the frame rate graph to see if there are significant drops. Main Thread Analysis: Review the main thread’s activities to identify any long tasks or inefficient operations. Rendering Issues: Analyze the rendering section for frequent or excessive painting operations. Memory Usage: Observe memory usage patterns to ensure there are no unexpected increases.
@tedhyu
Very impressive, Tony.
I have recorded the performance data during the occurrence of the lagging issue. Here’s a summary of my findings:
Upon examining the first critical time frame where the game begins to experience severe lag, the following key observations were made:
The frame rate starts to drop sharply just before the game completely freezes. At this point, the frame rate data disappears from the timeline, indicating a total halt in the rendering process.
Normal frame rate:
Drop frame rate:
Multiple GPU tasks, each taking approximately 751ms, were identified during the problematic frame. The green blocks on the timeline represent these GPU operations, indicating that the GPU was heavily engaged in rendering or compositing tasks during this period.
Upon examining the fourth critical time frame the task lasted for 13.77 seconds, leading to a substantial lag and eventual freezing of the application. The detailed analysis of this task reveals insights into its origin and impact:
Detailed Analysis of Long JavaScript Task:
The long task was triggered by a click event, consuming a substantial amount of time in scripting, specifically within its children functions.
(anonymous)
@
game.js:676:46
The function at
game.js:676:46
was responsible for the majority of the time, indicating that it contains the core logic causing the delay.
hideAvailablePositions
@
game.js:1255:25
This function,
hideAvailablePositions
, primarily contributed to the delay by delegating extensive tasks to its child functions.
_restorePieces
@
game.js:1119:17
The
_restorePieces
function, which handles significant processing, was one of the major contributors to the task's total execution time.
drawPiece
@
game.js:1170:12
The
drawPiece
function, while not the main contributor, still took a significant amount of time due to processing of drawing operations.
restore
The
restore
function was responsible for a substantial amount of the time, suggesting it is a critical point of performance issues.
Garbage Collection (GC) in C++ had minimal impact compared to the JavaScript tasks, indicating that the primary performance issues are related to the JavaScript execution.
The long JavaScript task that caused the game to freeze for 13.77 seconds was primarily due to extensive processing within functions like hideAvailablePositions
, _restorePieces
, and drawPiece
. The performance issue appears to be rooted in inefficient handling of rendering and state management tasks.
hideAvailablePositions
Function: This function consistently appeared as a major contributor to the lag. It triggers extensive processing and delegations to other functions, resulting in high execution times._restorePieces
Function: This function is involved in substantial processing and is a key factor in the observed long task durations. Its inefficiencies have a direct impact on performance.drawPiece
Function: Although not the primary cause, this function contributes to the rendering delays. The time spent in drawing operations adds up to the overall lag.@tedhyu
https://github.com/tridecco/game-client-web/commit/16aed06d935f13b4f4d66df283efa8b7f67c9a64
_restorePieces
to optionally use a cache (piecesCanvas) for improved performance.resizeCanvas
to handle resizing of piecesCanvas and call _restorePieces
with caching disabled for initial rendering.drawPiece
to draw pieces on piecesCanvas first, then copy to the main canvas, reducing the need for frequent redraws.Changes:
useCache
parameter to _restorePieces
method for conditional caching.piecesCanvas
and piecesCtx
for optimized piece rendering.drawPiece
method to use caching canvas before drawing on the main canvas.Performance and rendering issues have been successfully resolved. After optimizing the piece rendering process and introducing a caching mechanism, the performance has significantly improved. I re-recorded the performance metrics, and there are no more signs of lag or unresponsiveness. The memory usage is now between 25-40 MB.
@tedhyu
Description:
The game experiences significant performance issues during gameplay. Initially, the game runs smoothly, but after approximately the 10th turn, it begins to lag and eventually becomes unresponsive. The memory usage remains stable at around 100MB, so memory leakage is not suspected. The issue seems to be related to the rendering logic using the Canvas API.
Steps to Reproduce:
Expected Behavior:
The game should maintain consistent performance throughout all turns, without noticeable lag or freezing.
Actual Behavior:
Performance deteriorates after several turns, leading to significant lag and eventual page unresponsiveness.
Possible Causes: