Internet Explorer медленно отображает таблицы, созданные с помощью JavaScript

Question

Я работаю над страницей в веб-приложении с большим столом. 12 столбцов и до 300 строк в некоторых случаях. У меня возникли проблемы с быстрым отображением таблицы в Internet Explorer. Я повторил свои трудности в этом кусочке тестового кода:

http://jsfiddle.net/dSFz5/

Некоторые тесты с IE9 на Intel Quad Core Q8200 с 4 ГБ ОЗУ:
50 строк, 12 столбцов: 432мс
100 строк, 12 столбцов: 1023мс
200 строк, 12 столбцов: 2701мс
400 строк, 12 столбцов: 8107мс
800 строк, 12 столбцов: 24619мс

Экспоненциально плохо.

Мне удалось выкопать некоторый код, который отображает ту же самую тестовую таблицу НАМНОГО быстрее в Internet Explorer, но поскольку я использую шаблоны mustache.js для визуализации своих ячеек и строк (не допуская разметки HTML в моем JavaScript), я Я не могу использовать эти методы DOM:

http://jsfiddle.net/bgzLG/

Результаты тестов:
50 строк, 12 столбцов: 37 мс
100 строк, 12 столбцов: 72 мс
200 строк, 12 столбцов: 146мс
400 строк, 12 столбцов: 324 мс
800 строк, 12 столбцов: 566мс

Я не могу построить блок таблицы за блоком, как во втором примере, потому что в клиентских шаблонах мне нужно вводить строки HTML, возвращаемые усами. Если вы начнете вставлять туда .innerHTML, производительность снова улучшится.

Кто-нибудь может порекомендовать способ построения таблицы более эффективным способом, совместимым с использованием шаблонов на стороне клиента?

Разбиение на страницы - один из способов решения этой проблемы, но я бы хотел решить проблему самостоятельно.

Любые предложения приветствуются!

Answer 1

Во-первых, я бы предложил отделить создание строк от фактического создания таблицы, потому что это создает накладные расходы в отношении времени рендеринга. Затем вы должны попытаться создать всю таблицу, прежде чем добавлять ее в тело, чтобы минимизировать количество перерисовок / переформатов. Наконец, я бы предложил объединить массив в IE, потому что конкатенация строк в этом браузере многократно выделяет все большие и большие блоки памяти для каждой копии. Когда вы используете соединение с массивом, браузер выделяет достаточно памяти для хранения всей строки.

var strings = [],
    table = ['<table>'],
    i, j;

for (i = 0; i < 1000; i += 1) {
    strings[i] = [];

    for (j = 0; j < 12; j += 1) {
        strings[i][j] = randomString();
    }        
}

var start = new Date().getTime();

for (i = 0; i < 1000; i += 1) {
    table.push('<tr>');

    for (j = 0; j < 12; j += 1) {
        table.push('<td>', strings[i][j], '</td>');
    }

    table.push('</tr>');
}

table.push('</table>');

$('body').append(table.join(''));

var end = new Date().getTime();
var time = end - start;
alert('Execution time: ' + time + 'ms');​

Используя этот метод, я получаю следующие результаты в IE9:

100 rows is ~9ms
200 rows is ~19ms
500 rows is ~51ms
1000 rows is ~119ms
5000 rows is ~526ms

Я уверен, что мы могли бы оптимизировать его дальше, но этого должно быть достаточно для 300 строк (~ 30 мс), как вы и сказали, что ваша цель была. Он также сохраняет его под эталоном Святого Грааля в пределах ~ 50 мс для любого взаимодействия с пользовательским интерфейсом.

Answer 2

, используя это:

var table = $('<table></table>');

for (var a=0; a<200; a++) {


    var tr = $('<tr></tr>');    
    for (var b=0; b<12; b++) {

        tr.append('<td>'+randomString()+'</td>');        

    }

table.append(tr);
}

$('body').append(table); 

Побрился около 130 мс.Это строит таблицу в памяти перед добавлением ее в DOM.

Вот мои тесты:

100  - 346
200  - 670
500  - 2037
1000 - 4272
2000 - 10502

And your original:

100  - 408
200  - 898
500  - 2987
1000 - 10202
2000 - 41305

Answer 3

Я бы сказал, что шаблоны здесь просто не подходят по соображениям производительности. И имеет смысл построить таблицу, используя DOM-манипуляции сначала со всеми строками, а затем только затем добавлять ее. Это имеет большое значение.

Вы также можете попробовать что-то вроде jqGrid: он обрабатывает огромное количество строк, в то время как только html (виртуальный список) отображается на экране только видимыми строками.