post increment vs pre increment - Javascript Optimization

pre increment and post increment in javascript example
increment function javascript
increment counter javascript
pre increment and post increment in c questions
node js increment counter
increment and decrement operators in javascript with examples
prefix vs postfix increment java
increment a number with javascript

I was browsing Google Code when I chanced upon this project called JSpeed - optimization for Javascript.

I noticed one of the optimization was to change i++ to ++i in for loop statements.

Before Optimization

for (i=0;i<1;i++) {}

for (var i = 0, j = 0; i < 1000000; i++, j++) {
    if (i == 4) {
        var tmp = i / 2;
    }

    if ((i % 2) == 0) {
        var tmp = i / 2;
        i++;
    }
}
var arr = new Array(1000000);
for (i = 0; i < arr.length; i++) {}

After optimization

for(var i=0;i<1;++i){}
for(var i=0,j=0;i<1000000;++i,++j){if(i==4){var tmp=i>>1;}
if((i&1)==0){var tmp=i>>1;i++;}}
var arr=new Array(1000000);for(var i=0,arr_len=arr.length;i<arr_len;++i){}

I know what pre and post increments do, but any idea how does this speeds the code up?

This is what I read and could answer your question: "preincrement (++i) adds one to the value of i, then returns i; in contrast, i++ returns i then adds one to it, which in theory results in the creation of a temporary variable storing the value of i before the increment operation was applied".

post increment vs pre increment - Javascript Optimization, Hello, can anybody please help me to solve this question. As I understood X++ increments after the assignment, but ++X does it before the  Pre-increment and Post-increment in C/C++ Pre-increment operator : A pre-increment operator is used to increment the value of a variable before using it in a expression. In the Pre-Increment, value is first incremented and then used inside the expression.

This is a faux optimization. As far as I understand it, you're saving 1 op code. If you're looking to optimize your code with this technique, then you've gone the wrong way. Also, most compilers/interpreters will optimize this for you anyway (reference 1). In short I wouldn't worry about. But, if you're really worried, you should use i+=1.

Here's the quick-and-dirty benchmark I just did

var MAX = 1000000, t=0,i=0;

t = (new Date()).getTime();
for ( i=0; i<MAX;i++ ) {}
t = (new Date()).getTime() - t;

console.log(t);

t = (new Date()).getTime();
for ( i=0; i<MAX;++i ) {}
t = (new Date()).getTime() - t;

console.log(t);

t = (new Date()).getTime();
for ( i=0; i<MAX;i+=1 ) {}
t = (new Date()).getTime() - t;

console.log(t);

Raw results

Post    Pre     +=
1071    1073    1060
1065    1048    1051
1070    1065    1060
1090    1070    1060
1070    1063    1068
1066    1060    1064
1053    1063    1054

Removed lowest and highest

Post    Pre     +=
1071    ----    1060
1065    ----    ----
1070    1065    1060
----    1070    1060
1070    1063    ----
1066    1060    1064
----    1063    1054

Averages

1068.4  1064.2  1059.6

Notice that this is over one million iterations and the results are within 9 milliseconds on average. Not really much of an optimization considering that most iterative processing in JavaScript is done over much smaller sets (DOM containers for example).

Pre-increment vs. post-increment - JavaScript, The increment operator increments (adds one to) its operand and returns a value. post increment vs pre increment - Javascript Optimization. The optimization isn't the pre versus post increment. It's the use of bitwise 'shift' and 'and' operators rather than divide and mod. There is also the optimization of minifying the javascript to decrease the total size (but this is not a runtime optimization). This is probably cargo-cult programming.

In theory, using a post-increment operator may produce a temporary. In practice, JavaScript compilers are smart enough to avoid that, especially in such trivial case.

For example, let's consider that sample code:

sh$ cat test.js 
function preInc(){
  for(i=0; i < 10; ++i)
    console.log(i);
}

function postInc(){
  for(i=0; i < 10; i++)
    console.log(i);
}

// force lazy compilation
preInc();
postInc();

In that case, the V8 compiler in NodeJS produces exactly the same bytecode (look esp. at opcodes 39-44 for the increment):

sh$ node --version
v8.9.4
sh$ node --print-bytecode test.js | sed -nEe '/(pre|post)Inc/,/^\[/p'
[generating bytecode for function: preInc]
Parameter count 1
Frame size 24
   77 E> 0x1d4ea44cdad6 @    0 : 91                StackCheck 
   87 S> 0x1d4ea44cdad7 @    1 : 02                LdaZero 
   88 E> 0x1d4ea44cdad8 @    2 : 0c 00 03          StaGlobalSloppy [0], [3]
   94 S> 0x1d4ea44cdadb @    5 : 0a 00 05          LdaGlobal [0], [5]
         0x1d4ea44cdade @    8 : 1e fa             Star r0
         0x1d4ea44cdae0 @   10 : 03 0a             LdaSmi [10]
   94 E> 0x1d4ea44cdae2 @   12 : 5b fa 07          TestLessThan r0, [7]
         0x1d4ea44cdae5 @   15 : 86 23             JumpIfFalse [35] (0x1d4ea44cdb08 @ 50)
   83 E> 0x1d4ea44cdae7 @   17 : 91                StackCheck 
  109 S> 0x1d4ea44cdae8 @   18 : 0a 01 0d          LdaGlobal [1], [13]
         0x1d4ea44cdaeb @   21 : 1e f9             Star r1
  117 E> 0x1d4ea44cdaed @   23 : 20 f9 02 0f       LdaNamedProperty r1, [2], [15]
         0x1d4ea44cdaf1 @   27 : 1e fa             Star r0
  121 E> 0x1d4ea44cdaf3 @   29 : 0a 00 05          LdaGlobal [0], [5]
         0x1d4ea44cdaf6 @   32 : 1e f8             Star r2
  117 E> 0x1d4ea44cdaf8 @   34 : 4c fa f9 f8 0b    CallProperty1 r0, r1, r2, [11]
  102 S> 0x1d4ea44cdafd @   39 : 0a 00 05          LdaGlobal [0], [5]
         0x1d4ea44cdb00 @   42 : 41 0a             Inc [10]
  102 E> 0x1d4ea44cdb02 @   44 : 0c 00 08          StaGlobalSloppy [0], [8]
         0x1d4ea44cdb05 @   47 : 77 2a 00          JumpLoop [42], [0] (0x1d4ea44cdadb @ 5)
         0x1d4ea44cdb08 @   50 : 04                LdaUndefined 
  125 S> 0x1d4ea44cdb09 @   51 : 95                Return 
Constant pool (size = 3)
Handler Table (size = 16)
[generating bytecode for function: get]
[generating bytecode for function: postInc]
Parameter count 1
Frame size 24
  144 E> 0x1d4ea44d821e @    0 : 91                StackCheck 
  154 S> 0x1d4ea44d821f @    1 : 02                LdaZero 
  155 E> 0x1d4ea44d8220 @    2 : 0c 00 03          StaGlobalSloppy [0], [3]
  161 S> 0x1d4ea44d8223 @    5 : 0a 00 05          LdaGlobal [0], [5]
         0x1d4ea44d8226 @    8 : 1e fa             Star r0
         0x1d4ea44d8228 @   10 : 03 0a             LdaSmi [10]
  161 E> 0x1d4ea44d822a @   12 : 5b fa 07          TestLessThan r0, [7]
         0x1d4ea44d822d @   15 : 86 23             JumpIfFalse [35] (0x1d4ea44d8250 @ 50)
  150 E> 0x1d4ea44d822f @   17 : 91                StackCheck 
  176 S> 0x1d4ea44d8230 @   18 : 0a 01 0d          LdaGlobal [1], [13]
         0x1d4ea44d8233 @   21 : 1e f9             Star r1
  184 E> 0x1d4ea44d8235 @   23 : 20 f9 02 0f       LdaNamedProperty r1, [2], [15]
         0x1d4ea44d8239 @   27 : 1e fa             Star r0
  188 E> 0x1d4ea44d823b @   29 : 0a 00 05          LdaGlobal [0], [5]
         0x1d4ea44d823e @   32 : 1e f8             Star r2
  184 E> 0x1d4ea44d8240 @   34 : 4c fa f9 f8 0b    CallProperty1 r0, r1, r2, [11]
  168 S> 0x1d4ea44d8245 @   39 : 0a 00 05          LdaGlobal [0], [5]
         0x1d4ea44d8248 @   42 : 41 0a             Inc [10]
  168 E> 0x1d4ea44d824a @   44 : 0c 00 08          StaGlobalSloppy [0], [8]
         0x1d4ea44d824d @   47 : 77 2a 00          JumpLoop [42], [0] (0x1d4ea44d8223 @ 5)
         0x1d4ea44d8250 @   50 : 04                LdaUndefined 
  192 S> 0x1d4ea44d8251 @   51 : 95                Return 
Constant pool (size = 3)
Handler Table (size = 16)

Of course, other JavaScript compilers/interpreters may do otherwise, but this is doubtful.

As the last word, for what it worth, I nevertheless consider as a best practice to use pre-increment when possible: since I frequently switch languages, I prefer using the syntax with the correct semantic for what I want, instead of relying on compiler smartness. For example, modern C compilers won't make any difference either. But in C++, this can have a significant impact with overloaded operator++.

JavaScript help about increment - Web Development, In the Pre-Increment, value is first incremented and then used inside the expression. Syntax: a = ++x;. Here, if the value of 'x' is 10 then value of 'a' will be  Post-increment usually involves keeping a copy of the previous value around and adds a little extra code. Pre-increment simply does it's job and gets out of the way. I typically pre-increment unless the semantics would change and post-increment is actually necessary.

Sounds like premature optimization. When you're nearly done your app, check where the bottlenecks are and optimize those as needed. But if you want a thorough guide to loop performance, check this out:

http://blogs.oracle.com/greimer/entry/best_way_to_code_a

But you never know when this will become obsolete because of JS engine improvements and variations between browsers. Best choice is to not worry about it until it's a problem. Make your code clear to read.

Edit: According to this guy the pre vs. post is statistically insignificant. (with pre possibly being worse)

post increment vs pre increment - Javascript Optimization, I think the reason it is written with a post-increment may have to do more with The loop_expression (in this case, i++ or ++i ) is executed after statement is executed. not be able to optimize away the implicit temporary variable in the post-increment operator. [3] Please enable Javascript and refresh the page to continue. Since post-increment must return the state of the object before the increment was executed, a copy of the state prior to the increment is unavoidable for user-defined types. Of course a sufficiently smart compiler may be able to inline the post-increment and avoid the copy (assuming a trivial copy ctor) by exploiting the sequencing rules and

The optimization isn't the pre versus post increment. It's the use of bitwise 'shift' and 'and' operators rather than divide and mod.

There is also the optimization of minifying the javascript to decrease the total size (but this is not a runtime optimization).

Pre-increment and Post-increment in C/C++, Increment ++: Increases variable by 1. Decrement — — : Decreases variable by 1​. The ++ or — — can be applied both before and after the  Post-increment or pre-increment matters in situations like this: int j = ++i; int k = i++; f(i++); g(++i); where you provide some value, either by assigning or by passing an argument. You do neither in your for loops. It gets incremented only. Post- and pre- don't make sense there!

If the pre-increment (++x) is faster than post-increment (x++), why is , Quick Q: Efficiency of postincrement v.s. preincrement in C++ using g++ compiler with optimization enabled, the above loops had identical  The pre-increment "++ i " confused me as to why one should use it, as post increment is most commonly used. Googling told me that pre-increment is faster than post increment as the value of i need not be stored to a temporary register before the increment operation. This sounded logical to me and I believed it and used pre-increment in all my loops.

JavaScript, You will see the difference between pre and post increment/decrement in practice the compiler is almost certain to optimise the difference  Post-Increment VS Pre-Increment in Java Post-increment : In this concept, value is first computed whatever the operation it might be and then the computed value is incremented. So, first it will perform the operation and the result obtained will be incremented by one.

Quick Q: Efficiency of postincrement v.s. preincrement in C++ , JavaScript Increment and Decrement Operators: ++ , -- Increment and Decrements Operators: (are unary operators) are used to increment or decrement a variable value by 1.

Comments
  • Does optimization mean squeezing all the code together to make it unreadable? Genius!
  • nope. optimization is actually to improve and speed up certain parts of the code making it efficient and less CPU-costing. squeezing code together making it unreadable might be also called packing or minifying - and that is not necessary optimization, since it takes time to unpack.
  • Since when does parser doesn't need to unpack anything? The optimization here is transport, not performance.
  • This is also true in many other languages/compilers.
  • There is actually an optimization, the divisions by 2 have been replaced by a right shit operation.
  • It came from: physical-thought.blogspot.com/2008/11/…. As I understand, the practice may be different per compiler. By the way: via home.earthlink.net/~kendrasg/info/js_opt you may learn more about javascript optimization.
  • Hi Kooilnc - yep saw that blog post by googling. thanks a lot.
  • see this performance test: jsperf.com/…
  • i = 1; i = i++; console.log(i); // 1 i = 1; i = ++i; console.log(i); // 2
  • to fill up the 15 characters minimum. anyway, 1 op * n iterations can be a lot.
  • My point was that the difference is negligible and can't really be differentiated in smaller datasets (<1000), which is more common in JavaScript than larger data sets. Typically, datasets that are iterated over in JavaScript are DOM collections, which are typically under 200 members. Even still, the bottle neck in these situations is the DOM, not the minimal optimization of pre vs post vs +=
  • @mauris - "1 op * n iterations can be a lot" only if considered absolutely; in any real code it will be only a tiny part of the entire loop and so when looked at relatively to the whole operation will be negligible. a 9 ms difference on a loop that takes 1s means it is not important
  • I don't think this is good enough evidence to say i += 1 is any better. The numbers are too close - better to check the bytecode as Sylvian Leroux did.
  • it's more of the increment part rather than the way to access arrays. i know how for(i=0;i<arr.length;i++) can slow down the code (each iteration calls arr.length) - but not how pre and post increment