Last Saturday I had the pleasure of attending the 17th biannual Twin Cities Code Camp, an all day event featuring a variety of technology related talks presented by experts in their related fields. It was very entertaining and very enlightening.
One of these talks was done by JavaScript developer, “Md Khan“, who gave a talk titled “High Perf JS“. He gave an overview on web page performance and tips on how to edit your Javascript code to help increase your web page’s speed. I am going to talk about a few of the tips from his lecture.
Less is more:
One of the more important pieces taken from his lecture was the idea behind “Less is More”. Khan provided an example of this when he talked about loops. In a loop statement, it’s important to minimize the amount of code you cache inside a loop. For example:
As you can see, we have a variable named “container” initialized in the for loop. While in this case it doesn’t effect how the code functions, it does effect how fast the code runs. As the for loop executes it will perform the action inside the loop several times. This means that for as many times as the for loops runs, the container variable will be initialized the same amount of times. Seems like a lot of needless reinitializing.
To resolve this issue, we will initialize the container variable outside of the loop.
Now the “container” variable is only initialized once. Not only does this decrease the amount of code inside the loop statement, it increases the speed the loop will execute.
Loops: Always go backwards
If you would want to print out an array, you may do this by first printing out the first index in the array, then print out each element following the array, until finally it prints out the last element of the array. Doing this task is best done using a loop statement. The code may look like this:
However, doing this is not always the fastest method. Take note in the code: “len = myArr.length;” and “j<length”. The for loop starts it execution at myArr[0]. It will then find the length of the array and compare it to whatever value j is. The loop will continue doing this until all elements in myArray have been printed.
Well that’s nice, but how can we make this faster? It’s simple. You just need to remove one of the steps for the code. We are going to remove the “j<[len=myArr.length]” part in our for loop. We are then going to rewrite the code so we print the array in reverse order. It will look something like this:
Doing this only requires us to find the length of the array once. Then we will continue printing each element in myArr until we print out the element in myArr[0]. This way our for loop statement won’t have to constantly calculate myArr’s length each time it compares it to j. This optimizes any searches done in an Array.
Arrays: Literal vs new
When you wish to create an array, you would probably do this by creating a New Array, then define that new Array’s size. Your code would probably end up looking something like this:
While this is all good, keep in mind what you’re doing here. When you set the size of a new Array you are giving that array undefined elements. In the example above, an Array set to have 5 indexes will have 5 undefined elements to fill in the array. If you wish to include a define value into the array, you will have to generate code that will take that defined value and override it in the myArr’s index. Overall, not very efficient. So instead, of making a new Array, make a literal Array.
Now rather than having to override any undefined elements in the array you would just have to add the defined value to the array. A much more efficient way to do arrays.
These are just a few of the many ways you can increase your webpage’s performance. For more information and tips on this subject, please visit MD Khan’s webpage: That JS Dude.
For additional tips and tricks to improve your performance with Javascript visit: http://jsperf.com/popular.
Note: All pictures were taken from MD Khan’s presentation “High Perf JS“.