Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Since you experience your lag <em>'sometimes'</em>, and it's not a low frame rate issue, i would rather move my eyes towards the evil garbage collector : whenever it triggers, the application will freeze for up to a few milliseconds, and you'll get a frame miss.<br> To watch for this, you can use google profiling tools, in TimeLine / Memory / press the record button : you can see that a GC occurred when there's a sudden drop in the memory used.<br> Beware when using this tool, that it slows down a bit the app, and it creates garbage on its own (!)...<br> Also, since any function call for example creates a bit of garbage, so you can't have a full flat memory line.</p> <p>Below i show the diagram of a simple game i made <em>before</em> i optimized memory use,<br> there's up to 5 GC per second : </p> <p><img src="https://i.stack.imgur.com/MVSPv.png" alt="enter image description here"></p> <p>And here the diagram of the very same game <em>after</em> memory optimisation : there's something like 1 GC per second. Because of the limitations i mentioned above, it is in fact the best we can get, and the game suffers no frame drop and feels more responsive. </p> <p><img src="https://i.stack.imgur.com/k9fHv.png" alt="enter image description here"></p> <p>To avoid creating garbage<br> - never create object, arrays or functions.<br> - never grow or reduce an array size.<br> - watch out for hidden object creation : Function.bind or Array.splice are two examples. </p> <p>You can also :<br> - Pool (recycle) your objects - use a particle engine to handle objects that are numerous / short lived.</p> <p>I made a pooling lib (<a href="http://gamealchemist.wordpress.com/2013/02/02/no-more-garbage-pooling-objects-built-with-constructor-functions/" rel="nofollow noreferrer">here</a>) and a particle engine (<a href="http://gamealchemist.wordpress.com/2013/06/16/introducing-jsparkle-a-versatile-and-fast-javascript-particle-engine/" rel="nofollow noreferrer">here</a>) you might use if you're interested. </p> <p>But maybe first thing to do is to seek where you create objects, and have them created only once. Since js is single-threaded, you can in fact use static objects for quite a few things without any risk. </p> <p>Just one small expl :</p> <pre><code>function complicatedComputation(parameters) { // ... var x=parameters.x, y = parameters.y, ... ... } // you can call creating an object each time : var res = complicatedComputation ( { x : this.x, y : this.y, ... ... } ); //... or for instance define once a parameter object : complicatedComputation.parameters = { x :0, y:0, ... ... }; // then when you want to call : var params = complicatedComputation.parameters; params.x = this.x ; params.y = this.y; ... ... var res = complicatedComputation(params); </code></pre> <p>It has the drawback that previous calls parameters remains, so you don't get undefined if you don't<br> set them, but previous value, so you might have to change bit your function.<br> But on the other hand, if you call several times the function with similar parameters, it comes very handy.</p> <p>Happy memory hunting !</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload