How to speed up reading innerHTML in IE8?

Question

I am using jQuery with the DataTable plugin and now I have a big performance problem on the next line.

aLocalData[jInner] = nTds[j].innerHTML; // jquery.dataTables.js:2220 

I have an ajax call and an HTML formatted result string. I convert them to HTML nodes and this part is fine.

 var $result = $('<div/>').html(result).find("*:first"); // simlar to $result=$(result) but much more faster in Fx 

Then I activate the inclusion of the result from a simple table in a sortable datatable. Speed ​​is acceptable in Fx (about 4 seconds for 900 lines), but not acceptable in IE8 (more than 100 seconds).

I test it using the buildin profiler and find that the above single line takes 99.9% of the time, how can I speed it up? what did I miss?

  nTrs = oSettings.nTable.getElementsByTagName('tbody')[0].childNodes; for ( i=0, iLen=nTrs.length ; i<iLen ; i++ ) { if ( nTrs[i].nodeName == "TR" ) { iThisIndex = oSettings.aoData.length; oSettings.aoData.push( { "nTr": nTrs[i], "_iId": oSettings.iNextId++, "_aData": [], "_anHidden": [], "_sRowStripe": '' } ); oSettings.aiDisplayMaster.push( iThisIndex ); aLocalData = oSettings.aoData[iThisIndex]._aData; nTds = nTrs[i].childNodes; jInner = 0; for ( j=0, jLen=nTds.length ; j<jLen ; j++ ) { if ( nTds[j].nodeName == "TD" ) { aLocalData[jInner] = nTds[j].innerHTML; // jquery.dataTables.js:2220 jInner++; } } } } 

Answer 1

Try using the YUI DataTable . This is very fast for any large table I drop it on. You can use it with jQuery without any problems.

For example: http://paulisageek.com/compare/cpu/

Answer 2

I applied my own patch, but still looking for a real solution, it is still very slow in IE (10 + sec), but acceptable.

I read innerHTML after the line and broke my own.

  // For whom in interest // Tested on IE8, Fx3.5 ..... aLocalData = oSettings.aoData[iThisIndex]._aData; jInner = 0; if(nTrs[i].getElementsByTagName('table').length == 0){ nTds =$.trim(nTrs[i].innerHTML).split(/<\/td>\s*/i); for(j=0, jLen=nTds.length; j<jLen; j++){ aLocalData[jInner]=nTds[j].replace(/<td[\w\W]*?>/i,''); jInner++; } continue; } nTds = nTrs[i].childNodes; ..... 

If anyone knows why innerHTML is slow, please let me know.

Answer 3

A table with 10 columns and 900 rows will call the innerHTML function 9000 times. Instead, add the contents of innerHTML to the array and call innerHTML only once at the end of the table.

Something like:

 var contentArray = ["", "", "Cell Content", "", ""];
 container.innerHTML (contentArray.join (""));

Thus, innerHTML is called only once during the construction of the table. If not, you can call innerHTML at the end of each line, decreasing the number of times you call innerHTML to 900.

Answer 4

Have you ever considered using XML Data Island for this? This is a bit complicated, but it works pretty fast. Here's how you can bind an HTML table to XML Data Island:

http://www.devx.com/tips/Tip/14109

(on the island you can download data from a remote source, so it looks like Ajax).

Answer 5

I would suggest avoiding innerHTML with IE and try XML DOM elements. I tried various fixes for loops, but the delay is to pull the values ​​of the HTML element. The problem is the IE javascript engine and requires work around 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 score compared to FireFox 3 (unscientific): cancel a 2-column table: 1655 rows into an array of objects

• 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