SiteKickr Web Development

DOM lookups are fast!

I was working on a basic reverse mortgage calculator (input monthly payment, it returns how much you can afford). Not being a math wiz, I didn't spend too much time figuring out how to solve an equation that involves multiple variables, as well as some that are repeated.

Instead, I opted for a brute force approach, running through hundreds of calculations, tweaking the parameters a little bit each time, until an expected outcome is reached (or comes close). After completing my "brute force loop", and running some tests, I was a little disappointed to find that only 400 calculations took 2.5 seconds to complete on Firefox 13.

Then, it hit me, I was doing 3 DOM lookups with jQuery in each loop, i.e.


for(var i = 0; i < 400; i++) {
  // brute force stuff..
  param = $(this).parent().parent().siblings('.myfield').val();
  // more DOM lookups

  // formula that uses param
}

So, I was ecstatic, assuming that if I set a variable to the field values, outside of the for loop, I'll cut execution time dramatically.

var param = $(this).parent().parent().siblings('.myfield').val();
for(var i = 0; i < 400; i++) {
  // brute force stuff..
  // formula that uses param
}

I logged the time for both approaches, and much to my surprise, I only saved about 2 or 3% by dropping the DOM lookups.

Just thought I let everyone in on that, in case you are looking for ways to optimize your code – start somewhere else!

Oh, and as a little bonus, interesting to see how quickly different browsers run JS. My code was executed in the times listed below by browser:

FF 13:         2.5 seconds
IE    9:         1.7 seconds
IE    8:         5.1 seconds
IE    7:         4.8 seconds (what did they do wrong in IE 8!)
Chrome 19:  1.5 seconds
Safari 5.1     1.8 seconds

Nice going Google!