Too high dom processing time in Android native browsers

Question

I am currently trying to reduce the front end load time of my website. I followed various steps such as defer loading javascripts, using sprites, combining & minifying css/js files. I am already seeing a considerable reduction in page load time in major browsers. However, I could see that all android related native browsers have a DOM processing time of around 6-7 secs thereby shooting up the page load time to 9 secs which is too high when compared to other browsers load time(around 5 secs).

I know the information provided above has no codes and pretty vague. Can any one point me in the right direction to reduce the DOM processing time in Android native browsers?

Answer 1

Some time ago, I did lots of IE6 optimization. What I learned is to use selectors as specific as possible. Let's assume you have a huge DOM tree and try to select three nodes with class find_me using jQuery:

...
<div class="find_me">...</div>
<div class="find_me">...</div>
<div class="find_me">...</div>
...

$('.find_me') returns them all, but the browser has to check the whole DOM tree for this class name.

So let's wrap them up:

...
<div id="unique_wrapper">
  <div class="find_me">...</div>
  <div class="find_me">...</div>
  <div class="find_me">...</div>
</div>
...

$('#unique_wrapper .find_me') returns them as well, but is much faster as the browser picks the element with id unique_wrapper almost immediately and the rest of the DOM tree is neglected.

I don't really know how much the Android browser optimizes this behavior compared to an old IE6. But I bet you can speed things up a little bit I if you optimize your selectors - assumed you use selectors at all.