How to speed up the reading of innerHTML in IE8?

Question

I am using JQuery with the DataTable plugin, and now I have a big performnce issue on the following line.

aLocalData[jInner] = nTds[j].innerHTML; // jquery.d         


        

Answer 1

I would suggest avoiding innerHTML with IE and trying the XML DOM elements. I tried different fixes for loops but the delay is from pulling the values of the HTML element. The issue is IE's javascript engine and requires work arounds to get acceptable performance.

After much trial and error I came up with the following improvement over innerHTML:

   var start = new Date().getTime()
     var resp=[];
     var dataTbl = $(data).find('#tbl').get(0);  // jquery Ajax call to html, .get(0) for real DOM
     var dataObj = dataTbl.rows;  
     for (var i = 1, l = dataObj.length; i < l; i++) { 
     resp[i] = { 
        label: dataObj[i].firstChild.firstChild.nodeValue,
        value: dataObj[i].lastChild.firstChild.nodeValue
      };
    };
  alert("On Array 5(DOM:For:array[index]:i++:): Milliseconds: " + ( new Date().getTime() - start) );

IE8 versus FireFox 3 performance(non-scientific): Scrap a table of 2 column : 1655 rows into object array

• Array 1(JQuery .each): Milliseconds: 20203 / 68
• Array 2(for:array.push): Milliseconds: 19531 / 41
• Array 3(while:array.push): Milliseconds: 19609 / 44
• Array 4(For:array[index]): Milliseconds: 20562 / 326
• Array 5(DOM:For:array[index]:i++:): Milliseconds: 797 / 245 ***Winner
• Array 6(DOM:For:array[index]:i+=): Milliseconds: 828 / 245
• Array 7(DOM:For:array.push:i++): Milliseconds: 797 / 250