There are a number of ways that you can make your JavaScript code more efficient by changing the way you write your code. Here we are going to consider one specific change that you can easily make to improve the efficiency of your code and that is getting rid of dots.
A really common example of what I mean here is with the following code:
for (var i = 0; i < ary.length; i++)
Here we have a field name ary.length that contains a dot in the name. This means that the length is a property of the ary object.
Since it takes time to do a lookup of a property value compared to being able to access it directly, we can improve the efficiency of our code by reducing the numer of times that we need to look up the value or ary.length. With the way that the above code is written the value gets looked up each and every time around the loop. We can make the code more efficient by looking up the value once at the start of the loop and storing that in a local variable that can then be accessed more quickly for the subsequent lookups. This will work provided that the value of the property isn't changed by other processing within the loop.
for (var i=0, j=ary.length; i < j; i++)
Making your code more efficient by reducing the number of property lookups doesn't just apply to loops. It applies everywhere that you are referencing the values of properties. Consider the following:
document.getElementById('x').style.backgroundImage = a;
document.getElementById('x').style.color = '#ccc";
document.getElementById('x').style.padding = '3px';
Here we have a number of lookups each of which involves not one but three dots in each. This code can be shortened and made slightly more efficient by reducing the number of dots.
var x = document.getElementById('x').style;
x.backgroundImage = a; x.color = '#ccc";
x.padding = '3px';
This change doesn't result in as big an improvement in the speed of the code as that small change to the loop does (assuming that the loop is going to run a reasonable number of times. The actual efficiency improvement that this change brings with regards execution time is fairly minimal. Coding it this way rather than doing each lookup in full completely separately does have a number of other benefits as well though. The total amount of code you need to write is shorter and you only have the one reference to each object instead of multiple references. This makes the code quicker to write and less error prone and so the fact that it is also slightly more efficient as well is just a bonus.
These sorts of benefits apply to most of the situations where you can find a way to reduce the number of dots in your JavaScript code. Whenever you can find a way of rewriting your code like this to minimise the number of dots in the references (even if you can only get rid of one dot), you make the code shorter, easier to read, and less error prone.
There is only one thing you shouldn't do in trying to get rid of dots and that is to use the JavaScript keyword with to reduce the number of dots. Using with actually adds a whole series of implied dots into your code that actually makes your code way less efficient than it would be if you were to actually specify all of the dots in the code yourself since when you use with the JavaScript needs to first test for the code with the dot and then if it can't find that needs to look for the field as specified.