javascript拼接导致画布滞后

Question

I have a simple running game where platforms scroll from right to left. These platforms are stored in an array, and when they are off screen I use array.splice(index, 1) to remove it. This however is causing an ever so slight lag on the exact second splice is called. I have also used Array.shift() but I can still see the slight dip in frame rate as this is called. Is there a better way to remove/destroy something?

for(var x = 0; x < platforms.length; x++){
    var platform = platforms[x];

    platform.x -= 10;

    if(platform.x + platform.width < 0){
        platforms.shift();
    }
}

Answer 1

You could just not remove items from the array.

Use a fixed size array instead (large enough to store all the items you need) and flag as canceled the items you don't want to render anymore, you could reuse those flagged slots later.

Or you could directly overwrite the elements if the domain of your problem allows it.

[EDIT]

Some more considerations in response to the comments:

The evaluations of additional flag are computations stable in time, meaning that you can foresee how much time they will need and see if they fit the frame to render at a certain frame rate. Array.splice on the other hand could trigger garbage collection and that could be some order of magnitude longer than other language control flow constructs.

Garbage collection is an intensive task and should be avoided at all costs in the main loop of a game to achieve a fluid framerate. There are some resources and other questions here on SO which elaborate on this point, for example: http://buildnewgames.com/garbage-collector-friendly-code/

Answer 2

shift and splice are "slow" functions. They possibly rebuild your whole array.

Imagine having an area with 1000 items. A shift could possibly be 'create a new array with all items, except the first'. If your first 100 items now result in a shift, you rebuild 100 arrays, with 900-1000 items, which will result in about 100.000 inserts, 100 new array allocations.

for(var i = 0; i < array.length; i++)
{
    if (array[i] == ....)
    {
        var newArray = new Array(array.length - 1);
        for(var o = 1; o < array.length; o++)
            newArray[o - 1] = array[o];
        array = newArray
    }
}

worst case scenario, with a length of 1000, this will result in:

for ( i = 0 to 1000 )
    for ( o = i to 1000 )
        recreate the array

so that would be 0.5million iterations and recreations of the array. While this could be fixed with either 1 iteration (dynamicly sized array) or with 2 passes (fixed sized array):

// dynamic size
var newArray = new Array();
for(var i = 0; i < array.length; i++)
{
    if (array[i] != ....)
        newArray.push(array[i]);
}
array = newArray;

// fixed size 
var cnt = 0;
for(var i = 0; i < array.length; i++)
    if (array[i] != ....)
        cnt++;
var newArray = new Array(cnt);
for(var i = 0, o = 0; i < array.length; i++)
    if (array[i] != ....)
        newArray[o++] = array[i];
array = newArray;

and another simple optimization for your for loops (which obviously wont work if you modify the array in the for loop):

for(var i = 0, l = array.length; i < l; i++)

(yes, i am aware that some numbers may be off. but it gets the point across.)