Sign in to follow this  
Ey-Lord

Optimization in Javascript

Recommended Posts

Hello,

 

I'm currently building a little rpg simulation game in JS mostly. I'm at a point where I'm trying to speed-up my existing code as much as possible.

 

Why ? Because I'm working on my AI and it does requiere me to be able to compute as many operation in a short time frame as I can. The more the better.

 

I'm still an order of magnitude slower than what I'd like at this point on my project :/

 

I've profiled my code over and over (on IE, chrome, FF(firebug) ) and tried to optimized the most called/time consuming part on my code.

 

I've started with themost common technique I learned (I'm no JS expert^^):

- cache length of my loops (other loop otpimization such a reverse order, remplacing by do/while ect, gave me mixed result)

- changed if/elses to switch when appropriate and to Hash structure for larger tests

- reduce scope traversal (ex: create a local reference to something like MyObject.MyPropertie.ArrayOfItems[i] if its gonna be used more than 2 times)

- reduced all DOM manipulation to a strict minimum (so far, that part seems ok)

 

I then started to "cache" everything I could to avoid re-computing things for nothing. It gave decent results overall but I'm running out of meaningfull things to cache.

 

I also took a good look at my code logic overall and optimized all I could think of to reduce the computation made and improve the general flow of my code.

 

The last thing I came upon is inlining functions. It gave me a huge boost at the expense of code readability / maintainability. I cannot really use that anymore without having a code that will be too dirty to work on later on :/

 

i'm probably forgetting a few other optimization tricks i've done or tried.

 

I know that the next big thing would be to look again at my code logic and try to find new design ideas to speed things up but since I'm out of idea there, I figured I'd come here and ask you guys if you have any kind of tips to improve performance for my JS code. I've read a lot of articles on the web but i'm sure I've missed some nice (maybe niche?) tips !

 

Cheers,

 

 

Share this post


Link to post
Share on other sites


I know that the next big thing would be to look again at my code logic and try to find new design ideas to speed things up but since I'm out of idea there...

That is the first thing you should be looking at - this is where the biggest gains are typically found. Micro-optimisation rarely results in orders of magnitude of a difference.

Share this post


Link to post
Share on other sites
The fastest code is the code that isn't run. Perhaps you have a few algorithms that have a large time complexity (eg O(n^4)) that you could write in a more efficient manner requiring less code to be run.

Also, it may be too late at this point in your project (one does not simply start using closure in their project) but for your next js game you could consider closure compiler.
https://developers.google.com/closure/compiler/?hl=en
It would let you write your code in a readable manner and it takes care of the optimizations. Edited by HappyCoder

Share this post


Link to post
Share on other sites

 


I know that the next big thing would be to look again at my code logic and try to find new design ideas to speed things up but since I'm out of idea there...

That is the first thing you should be looking at - this is where the biggest gains are typically found. Micro-optimisation rarely results in orders of magnitude of a difference.

 

 

I'm thinking about that all the time but for now I fail to find another design idea that could be faster that what I've got. I may try to describe what I'm doing and my program architecture so people can take a look at it and maybe point me to the obvious better ways I'm no seeing ^^ Do you think that could be worth doing ?

 

The fastest code is the code that isn't run. Perhaps you have a few algorithms that have a large time complexity (eg O(n^4)) that you could write in a more efficient manner requiring less code to be run.

Also, it may be too late at this point in your project (one does not simply start using closure in their project) but for your next js game you could consider closure compiler.
https://developers.google.com/closure/compiler/?hl=en
It would let you write your code in a readable manner and it takes care of the optimizations.

 

My main algorithm complexity depend on the efficiency of my whole game engine in general ; more specifically on how many times per second (or rather millisecond) I can execute a simulation of a fight in my game (a rpg). Finding a lower complexity would mean finding another algorithm but for now, I think I'll stick with the one I've got : MCTS for AI.

 

I've tried using Google closure compiler a few times but as you said, I feel like it's a bit late in my developpement process to re-write all my code to fit that logic.

 

 

Thx for the replies guys :)

Share this post


Link to post
Share on other sites

Havent had time to write up a good post about my game achitecture yet, but i'll come to it asap smile.png

 

For now, if someone could enlighten me on this:

 

I've got a class that represents the player's unit in my game. The player has 4 units, all created at the start of the game.

 

I'm using something very simple, kinda like that :

function PartyCharacter()
{
this.Armor ;
this.FireResistance ;
this.CriticalStrike ;
// a hundred more like that
}

I was thinking that having property value un-initialized wasnt very safe / good design and that it potentially could hurt javascript optimization regarding the type of the variable so I assigned them a basic value :

function PartyCharacter()
{
this.Armor = 0 ;
this.FireResistance = 0 ;
this.CriticalStrike = 0 ;
// a hundred more like that
}

It gave me a small performance boost on firefox but it gave me a 300% decrease in overall performance on chrome. I'm having a hard time figuring out what it causing it. The only thing I noticed is that the performance drop happens after a certain number of variable initialisation (something like 15 or so). if I initialize only 14, the performance stays "normal". As soon as add one more " = 0", the performance drop and drop hard.

I've checked chrome profiler and the issue seems to be that it now faling to optimize other function in the code (too many optimization on the function). The 2 function that are concerned by this newly V8 optimization issue do not interact directly with the Player's unit but they do call other functions that do.

 

I'm a bit clueless about that behavior.

 

Likewise I tought about declaring these variables as protoype since all instances of Player's unit use them. It gave me a 20% performance drop on both FF and Chrome. I cannot figure out why is that.

function PartyCharacter()
{

}
PartyCharacter.prototype.Armor = 0 ;
PartyCharacter.prototype.FireResistance = 0 ;
PartyCharacter.prototype.CriticalStrike = 0 ;

EDIT : Another thing that is currently eluding me is the difference of performance i got between browsers. FF/Chrome are about the same but IE specifically is always 3 times slower.

 

I've tried to profile the game for 60 seconds and see if there was any bottle-neck on IE but, looking at the profiling results alone, I would think that IE is faster O_o I must be missing something.

 

I know FF (using firebug atm) and IE's profiler works a bit differently but I can't explain the results of my profiling session.

 

On both session the ratio of number of functions calls is the same. So the game logic is not impacted on IE and only the time spent inside function should explain the speed difference.

 

I see that on IE i've got 2 functions with a much higher "self" time (not including function called inside) that their counterpart on FF: 33%+17% on IE and 7+2% and FF.

The issue is that the average time for these functions are shorter on IE than on FF.

 

That means that function that are called the same number of time on both browser, execute faster on IE but at the same times takes much time of the overall game process? Something is wrong, somwhere....but I can't put my finger on what is it.

 

Here is a pastebin for my profiling data for FF : http://pastebin.com/sjxWaz6p#

Same thing for IE : http://pastebin.com/9NW1E0bg#

 

Copy/paste the raw data in excel and your' good to go !

 

Thx for help smile.png

Edited by Ey-Lord

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this