array.push(element) vs array[array.length] = element

This question already has an answer here:

  • How to append something to an array? 25 answers
  • Why is array.push sometimes faster than array[n] = value? 5 answers

  • The fastest way to do it with current JavaScript technology, while also using minimal code, is to store the last element first, thereby allocating the full set of array indices, and then counting backwards to 0 while storing the elements, thereby taking advantage of nearby memory storage positions and minimizing cache misses.

    var arr3 = [];
    for (var i = len; i>0;){
        i--;
        arr2[i] = numbers[i] * 2;
    }
    alert(arr2);
    

    Note that if the number of elements being stored is "big enough" in the view of the JavaScript engine, then the array will be created as a "sparse" array and never converted to a regular flat array.

    Yes, I can back this up. The only problem is that JavaScript optimizers are extremely aggressive in throwing away calculations that aren't used. So in order for the results to be calculated fairly, all the results have to be stored (temporarily). One further optimization that I believed to be obsolete, but actually improves the speed even further is to pre-initialize the array using new Array(*length*) . That's an old-hat trick that for a while made no difference, but no in the days of extreme JavaScript engine optimizations, it appears to make a difference again.

    <script>
    function arrayFwd(set) {
    var x = [];
    for (var i = 0; i<set.length; i++)
    x[x.length] = set[i];
    return x;
    }
    
    function arrayRev(set) {
    var x = new Array(set.length);
    for (var i = set.length; i>0;) {
    i--;
    x[i] = set[i];
    }
    return x;
    }
    
    function arrayPush(set) {
    var x = [];
    for (var i = 0; i<set.length; i++)
    x.push(set[i]);
    return x;
    }
    
    results = []; /* we'll store the results so that
    optimizers don't realize the results are not used
    and thus skip the function's work completely */
    function timer(f, n) {
    return function(x) {
    var n1 = new Date(), i = n;
    do { results.push(f(x)); } while (i-- > 0); // do something here
    return (new Date() - n1)/n;
    };
    }
    
    set = [];
    for (i=0; i<4096; i++)
    set[i] = (i)*(i+1)/2;
    
    timers = {
    forward: timer(arrayFwd, 500),
    backward: timer(arrayRev, 500),
    push: timer(arrayPush, 500)
    };
    for (k in timers) {
    document.write(k, ' = ', timers[k](set), ' ms<br />');
    }
    </script>
    

    Opera 12.15:

    forward = 0.12 ms backward = 0.04 ms push = 0.09 ms

    Chrome (latest, v27):

    forward = 0.07 ms backward = 0.022 ms push = 0.064 ms

    (for comparison, when results are not stored, Chrome produces these numbers: forward = 0.032 ms backward = 0.008 ms push = 0.022 ms

    This is almost four times faster versus doing the array forwards, and almost three times faster versus doing push.)

    IE 10: forward = 0.028 ms backward = 0.012 ms push = 0.038 ms

    Strangely, Firefox still shows push as faster. There must be some code re-writing going on under the hood with Firefox when push is used, because accessing a property and invoking a function are both slower than using an array index in terms of pure, un-enhanced JavaScript performance.

    链接地址: http://www.djcxy.com/p/17932.html

    上一篇: 如何在数组中逐个添加值

    下一篇: array.push(element)vs array [array.length] =元素