Я использую JQuery с плагином DataTable, и теперь у меня есть большая проблема performnce о следующей строке.
aLocalData[jInner] = nTds[j].innerHTML; // jquery.dataTables.js:2220
У меня есть вызов ajax и строка результата в формате HTML. Я преобразовываю их в узлы HTML, и та часть в порядке.
var $result = $('<div/>').html(result).find("*:first");
// simlar to $result=$(result) but much more faster in Fx
Затем я активируюсь, включают результат простой таблицы к поддающейся сортировке таблице данных. Скорость приемлема в Fx (приблизительно 4 секунды для 900 строк), но недопустима в IE8 (более затем 100 секунд).
Я проверяю его, глубоко использование профилировщика здания, и найденный вышеупомянутой одной строкой берет весь 99,9% времени, как я могу ускорить его? что-нибудь я отсутствовал?
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++;
}
}
}
}
Попробуйте использовать YUI DataTable . Это очень быстро для любого большого стола, на который я его бросаю. Вы можете без проблем использовать его с JQuery.
Например: http://paulisageek.com/compare/cpu/
I Я применил свой собственный патч, но все еще ищу реальное решение, оно все еще очень медленное в IE (10+ секунд), но приемлемо.
Я читал innerHTML один раз подряд и разбивал свой собственный.
// 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;
.....
Если кто-нибудь знает, почему innerHTML работают медленно, дайте мне знать.
Таблица с 10 столбцами и 900 строками вызовет функцию innerHTML 9000 раз. Вместо этого добавьте содержимое innerHTML в массив и вызовите innerHTML только один раз в конце таблицы.
Примерно так:
var contentArray = ["","","Cell Content","",""]; container.innerHTML(contentArray.join(""));
Таким образом, innerHTML вызывается только один раз в процессе построения таблицы. В противном случае вы могли бы вызвать innerHTML в конце каждой строки, уменьшив количество вызовов innerHTML до 900.
Вы когда-нибудь думали об использовании для этого XML Data Island? Это немного сложно, но работает довольно быстро. Вот как можно привязать таблицу HTML к острову данных XML:
http://www.devx.com/tips/Tip/14109
(на острове вы можете загружать данные из удаленного источника, так что это похоже на Ajax) .