Performance leak in my program (JavaScript)

In summary: You should try to make it into an app.In summary, the conversation revolved around the topic of a snake game, specifically discussing its speed and potential causes for slowdown. The participants also discussed strategies for debugging and improving the game's performance, such as simplifying the code and eliminating unnecessary loops. They also mentioned the importance of detecting when the snake hits itself or the wall as well as the possibility of turning the game into an app.
  • #1
986
12
Any ideas much appreciated.

Repro steps:
  • Open this: http://jaminweb.com/projs/snakegame.php [Broken]
  • Change the speed to Fast
  • Go get a couple pieces of food, lengthening your snake a few blocks
  • Notice how it's already moving slower
Code:

https://github.com/jamkin/snake-game/blob/master/projs/snakegame.php [Broken]
 
Last edited by a moderator:
Technology news on Phys.org
  • #2
If the speed is slow does the game still slow down?

If you start the game and don't touch anything or mouse over it does it still slow down?

Have you used the browser debugger to see what's going on?

Can you characterize the slow down, does it smoothly slow down or slow and then speed up...?

You're either not releasing some memory or your list of snake segments list is growing and it's taking longer to process or you're making and releasing so many objects that garbage collection can't keep up.
 
  • #3
One other point, I'm using an iPad and there's no arrow keys to press so you might need to consider tablets in your design.
 
  • #4
Neat game.I was able to get to 130 at FAST before I saw it slow down. Not sure any normal humans could get much higher before their finger tendons burst into flame.

It may not be a memory leak per se, it may simply be that repositioning 13 snake segments in less than 100ms (the delay on FAST setting) exceeds JS's ability.

Not sure what ends a game other than hitting a wall. Sometimes games just seemed to end for no reason when I was nowhere near a wall. If I had to guess, can a game end if the snake drives into itself?

On my laptop, I often lost games by accidentally scrolling the play area off-screen. It would be helpful if the whole page fit on-screen during play. But this is a tidy-up thing. you've got bigger fish to fry.
 
Last edited:
  • #5
Try this for debugging.

Make the snake auto-navigate, so that it never hits a wall (easy to do, in your hitWall function, just change endGame to changeDirection).
Oh, and give it, like 10 segments to start off.

Now let it run continuously. You'll be able tell if the slowdown is reproducible.
Start increasing the speed. (reducing the delay toward zero).
 
  • #6
Are you sure the slow isn't because of Leibowitz hypothesis ?
 
  • #7
As the snake grows, it does progressively more on each cycle of motion: it check whether the head hits its body, looping through all the body segments, and it moves every segment. I suspect it is the second operation that affects performance most significantly. You could measure its raw performance to be sure.

I should also remark that this second operation can be much simplified. You do not need to move all the segments. You only need to take the last segment and move it to the new location of the head. Things get a bit more complicated when the snake hits the food, because then it needs to grow; I leave figuring this out as an exercise.

You could also eliminate the "hit body" loop. Then the performance of motion will be wholly independent of the snake's length.
 
  • Like
Likes mafagafo
  • #8
voko said:
I should also remark that this second operation can be much simplified. You do not need to move all the segments. You only need to take the last segment and move it to the new location of the head.

Oh, my gosh ... How did I not think of that?

Things get a bit more complicated when the snake hits the food, because then it needs to grow; I leave figuring this out as an exercise.

I have it working. Is there an obvious way of improving the algorithm?

You could also eliminate the "hit body" loop. Then the performance of motion will be wholly independent of the snake's length.

Isn't it essential to have a function to determine whether the snake's head hit its body? That's supposed to end the game.
 
  • #9
DaveC426913 said:
It may not be a memory leak per se, it may simply be that repositioning 13 snake segments in less than 100ms (the delay on FAST setting) exceeds JS's ability.

That seems strange based on my previous experience with JS. I've made made very computationally expensive programs that worked lightning. The repositioning of 13 snake segments is only 100-200 operations or so.

Not sure what ends a game other than hitting a wall. Sometimes games just seemed to end for no reason when I was nowhere near a wall. If I had to guess, can a game end if the snake drives into itself?

Yes, according to the rules of the Snake arcade game, the snake cannot run into itself.

Interestingly, I just tried out someone else's implementation and there's slows down as well: http://patorjk.com/games/snake/
 
  • #10
Jamin2112 said:
Isn't it essential to have a function to determine whether the snake's head hit its body?

A function, yes.

A loop, not necessarily.
 
  • #11
voko said:
A function, yes.

A loop, not necessarily.

When the food gets placed in a new position (at a random place on the grid ... Later I'm going to optimize this by keeping a list of coordinates that the snake is not on, so that I can I add the food at a random one of those coordinates), I need to check whether that new position is on the snake, which requires looping through all its links -- no?
 
  • #12
Jamin2112 said:
I need to check whether that new position is on the snake, which requires looping through all its links -- no?

As I said, not necessarily. You need a data structure that gives you a yes/no answer without looping.
 
  • #13
I like the front end quite a bit.
 

1. What is a performance leak in a JavaScript program?

A performance leak in a JavaScript program is a type of issue that occurs when the program is taking longer to execute than it should. This can happen due to inefficient code, memory leaks, or other factors that slow down the program's performance.

2. How can I identify a performance leak in my JavaScript program?

There are a few ways to identify a performance leak in a JavaScript program. One way is to use a profiler tool, which can analyze the program's execution and identify any areas that are causing performance issues. Another way is to use browser developer tools to inspect the program's memory usage and identify any memory leaks.

3. What are some common causes of performance leaks in JavaScript programs?

Some common causes of performance leaks in JavaScript programs include inefficient algorithms, too many DOM manipulations, excessive network requests, and memory leaks. Poorly written code and lack of optimization can also contribute to performance issues.

4. How can I prevent performance leaks in my JavaScript program?

To prevent performance leaks in your JavaScript program, it's important to write efficient and optimized code. This includes using appropriate data structures and algorithms, minimizing DOM manipulations, and avoiding excessive network requests. Regularly testing and profiling your code can also help identify and address any potential performance issues.

5. What are some best practices for optimizing performance in JavaScript programs?

Some best practices for optimizing performance in JavaScript programs include using event delegation, minimizing global variables, and avoiding unnecessary loops and conditionals. It's also important to properly manage memory and resources, as well as regularly reviewing and optimizing code for efficiency.

Suggested for: Performance leak in my program (JavaScript)

Replies
2
Views
927
Replies
9
Views
933
Replies
11
Views
1K
Replies
1
Views
957
Replies
4
Views
905
Replies
5
Views
1K
Replies
6
Views
865
Replies
13
Views
1K
6
Replies
187
Views
7K
Back
Top