> Is worrying about this for normal web apps just a micro-optimization or can you see instances where this would affect an application's speed significantly?
I don't think there is such thing as an average web application so things must be decided on the case-by-case basis.
In general if creation/usage of some "class" of objects is on the very hot path - then their layout can affect performance of the hot path. In this case constructor might be preferable for the reasons outlined in the post (faster construction, one less indirection for the property access). However the decision must be made only after deep investigation.
Trying to understand the described matter I created some simple code to benchmark different cases.
Probably I got something wrong, but setting properties inside the constructor function (prop-benchmark-b.js) are almost 6 times slower that setting them outside of it (prop-benchmark-a.js)
var o = new F(i, i, i, i, i, i, i, i, i, i, z)
z = o
// ... skipped
o.z = z
This makes o.z = o, so only the last object survives. When you use constructor you actually link all of them together - which means there is more garbage around - GCs are more expensive.
If you fix this bug, e.g. by doing
var o = new F(i, i, i, i, i, i, i, i, i, i, z)
o.z = z
z = o
you actually OOM in prop-benchmark-a.js case because object there is less compact than one created by constructor. Just as the post predicts.
I was lucky to not hit OOM and I've got 5.648s for setting properties outside of the constructor and 3.680s for setting them inside of the constructor, so just as the post predicts.
At the same time, if I'm trying to simplify the test case and set only numeric values and not object ones, I've got nearly the same results: 3.953s and 3.922s for 10x more iterations (prop-benchmark-f.js and prop-benchmark-g.js).
> At the same time, if I'm trying to simplify the test case and set only numeric values and not object ones, I've got nearly the same results: 3.953s and 3.922s for 10x more iterations (prop-benchmark-f.js and prop-benchmark-g.js).
Well, the secret here is that even if you have an empty constructor V8 still initially gives enough slack to you object for 10 in-object properties, and by coincidence you have precisely 10 properties.
I don't think there is such thing as an average web application so things must be decided on the case-by-case basis.
In general if creation/usage of some "class" of objects is on the very hot path - then their layout can affect performance of the hot path. In this case constructor might be preferable for the reasons outlined in the post (faster construction, one less indirection for the property access). However the decision must be made only after deep investigation.