Extreme JavaScript Performance

4 min read Original article ↗
  • 1.
  • 3.
  • 4.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

    function  methodCall(){   function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  square(i); } function  inlinedMethod(){      var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  i*i; }

  • 12.

    function  methodCall(){   function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  square(i); } function  inlinedMethod(){      var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  i*i; }

  • 13.

    function  methodCall(){   function  square(n){  return  n*n  };    var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  square(i); } function  inlinedMethod(){      var  i=10000,  sum  =  0;    while(i-­‐-­‐)  sum  +=  i*i; }

  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.

    function  literals(){   var  a  =  [],  o  =  {}; } function  classic(){    var  a  =  new  Array,  o  =  new  Object; }

  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.

    1 * stringcoerces the string into a float, result = 12.5 double bitwise NOT* floors the number >  ~~(1  *  "12.5") 12 *good overview on http://tr.im/bitwise

  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.

    var  test  = ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i  =  10000; while(i-­‐-­‐)  test  =  test  +  str;

  • 38.

    for  loop while loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s

  • 39.

    for  loop while loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s

  • 40.

    for  loop while loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s

  • 41.

    for  loop while loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s

  • 42.

    for  loop while loop 0.12s 0.12s 0.13s 0.13s 0.6s 0.6s 0.04s 0.04s

  • 43.

    var  test  = ''; for  (var  i  =  0;i<10000;i++)  test  =  test  +  str; var  test  =  '',  i  =  10000; while(i-­‐-­‐)  test  =  test  +  str; 3 expressions in “for” 1 expression in “while” (when i equals 0, expression will be false)

  • 44.
  • 45.

    function  unrolledLoop(){   var  j=0;    j++;  j++;  j++;  j++;  j++;  j++;      j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++;    j++;  j++;  j++;  j++;  j++;  j++; }

  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.

    function  uncached(){   var  i  =  10000;    while(i-­‐-­‐)  window.test  =  'test'; } function  cached(){    var  w  =  window,  i  =  10000;    while(i-­‐-­‐)  w.test  =  'test'; }

  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.

    var  b  = false,  n  =  99; function(){    return  n*n  &&  b; } function(){    return  b  &&  n*n; }

  • 62.

    var  b  = false,  n  =  99; function(){    return  n*n  &&  b; } function(){    return  b  &&  n*n; } b is false, so n*n doesn’t need to get evaluated

  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.

    >>>  var  n =  1; undefined >>>  if(true  &&  (n=2))  ...; >>>  n 2 >>>  if(true  ||  (n=3))  ...; >>>  n 2 not a pure engine optimization, the execution actually stops here, n=2 needs to be evaluated, so n is set to 2 here it doesn’t (expression must be true), so n is NOT set to 3

  • 69.
  • 70.

    function(){    var obj  =  {  prop:  'test',  str:  ''  };    with(obj){          var  i  =  10000;        while(i-­‐-­‐)  str  +=  prop;        return  str;    } } function(){    var  obj  =  {  prop:  'test',  str:  ''  },  i  =  10000;    while(i-­‐-­‐)  obj.str  +=  obj.prop;    return  obj.str; }

  • 71.

    with(obj){  p  }obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s

  • 72.

    with(obj){  p  }obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s

  • 73.

    with(obj){  p  }obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s

  • 74.

    with(obj){  p  }obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s

  • 75.

    with(obj){  p  }obj.p 0.071s 0.012s 0.039s 0.028s 0.078s 0.078s 0.077s 0.006s

  • 76.

    var  a  = 0; function(){    try{        a  +=  1;    }  catch(e)  {} } function(){    a  +=  1; }

  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 96.
  • 97.

    function  ()  { return  2  *  3;  } function  ()  {  return  2  *  3;  }

  • 98.

    function  ()  { return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  }

  • 99.

    function  ()  { return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  6;  }

  • 100.

    function  ()  { return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  2  *  3;  } function  ()  {  return  6;  } WTF?

  • 101.
  • 102.
  • 104.
  • 105.