Оптимизация прорисовки таблицы

[frid-karatel]

В-общем, суть задачи, которую никак не могу решить более-менее правильно... И так, и так - не нравится скорость прорисовки - и все тут...

var myTable = [];//Массив строк, длина массива может быть и 1000
var myTableRow = [];//Каждый эл-нт массива myTable имеет еще массив, т.н. столбец. Столбцов может быть до 20ти штук
//Каждый столбец имеет свой тип. Например, если там число, то привести его в дату по шаблону "d.m.Y в H:i".
Если нарисовать структуру, то она будет такой:
myTable = {
	[Type:'int' or 'text', Value: '0-9' or 'azAZ'],
	...
	[Type:'int' or 'text', Value: '0-9' or 'azAZ']
};

В итоге, получается такой цикл для рисования этой таблицы

var rc = myTable.length;
var cc = myTable[0].length;//Каждая строка имеет одинаковое кол-во столбцов

var ri;
var ci;

var row;
var Result = [];
var c;

Result.push('<table><tbody>');
for (ri = 0; ri < rc; ri++) {
	row = [];
	for (ci = 0; ci < cc; ci++) {
		c = myTable[ri].Col[ci];
		switch(c.Type) {
			case 'int': {
				c = new Date(parseInt(c.Value));
				c = c.getDate();
			} break;
			case 'text': {
				c = '"' + c + '"';
			} break;
		}
		row.push(c);
	}
	Result.push('<tr><td>' + row.join('</td><td>') + '</td></tr>');
}
Result.push('</tbody></table>');

$(myTableArea).html(Result.join(''));

Проблема в том, что скорость такой "сборки" таблицы оставляет желать лучшего...
Например, у меня скорость такого алгоритма на 15 строк занимает где-то 300 мс.
Если строк не 15, а 100, то алгоритм занимает больше секунды.
А если 1000 строк нарисовать... То это вообще можно спать идти

Кто что подскажет?

PS: Разработка не кросс-браузерная, исключительно под Firefox.

[Gvozd]

попробуй использовать вместо $().html(), который как я предполагаю является аналогом innerHTML, createElement
думаю этот метод займет чуточку больше времени на генерацию таблицы, но добавление собранной в памяти таблицы займет гораздо меньше времени, наверно

[frid-karatel]

попробуй использовать вместо $().html(), который как я предполагаю является аналогом innerHTML, createElement
думаю этот метод займет чуточку больше времени на генерацию таблицы, но добавление собранной в памяти таблицы займет гораздо меньше времени, наверно

Не прибавило скорости... Даже убавило - 15 строк рисуются на 100 мс больше...

Заметил, что много времени (где-то 100-150 мс на 15 строк) тратится на удаление прошлой таблицы.

Например, мне надо вывести следующие 15 строк.
Я удаляю старую таблицу и создаю новую. Так вот, последующие создания (обновления) требуют на 100-150 мс больше...

Пытался заменить switch на массив из function, т.е.:

var fa = [];
for (ci = 0; ci < cc; ci++) {
	switch(myTable[0].Col[ci].Type) {
		case 'int': {
			fa[ci] = function(Col) {
				Col = new Date(parseInt(Col));
				Col = Col.getTime();
			};
		} break;
		case 'text': {
			fa[ci] = function(Col) {
				Col = '"' + Col + '"';
			};
		} break;
	}
}

И дальше вместо switch сразу вызывать функцию через fa[ci]( myTable[ri].Col[ci].Value).
Но это заняло на порядок больше времени, чем простой switch...

PS: А что, если в switch манипулировать цифрами, а не текстом?
Т.е. вместо int использовать 0, вместо text - 1?
С точки зрения машины, будет ли это производительней?

[tenshi]

итерировать сначала по столбцам, а потом по строкам..

[tenshi]

push умеет принимать несколько параметров

[frid-karatel]

итерировать сначала по столбцам, а потом по строкам..

Я, кстати, думал об этом... но не смог сообразить, как собрать таблицу

[tenshi]

из дивов её собирать...

[frid-karatel]

из дивов её собирать...

Хм... насколько это будет правильно?
100 строк по 10 столбцов в каждой - это 1000 DIV'ов...

Не будет ли это сложновато для отрисовки?

[tenshi]

думаешь 1000 ячеек будет проще? х)

[frid-karatel]

думаешь 1000 ячеек будет проще? х)

Ну... с точки зрения наглядности - проще ими управлять Например, закрасить ячейки в строке в другой цвет... Или поменять ширину колонки...