createElement('table') и тормоза

[Bajjy]

создаю таблицу, в принципе, стандартным методом:

var table = document.createElement('table');
    table.style.borderCollapse = 'collapse'
    table.style.position = "absolute"
    table.style.width = xlen*cellwd+'px'
    table.style.height = ylen*cellhg+'px'
    table.style.borderWidth = '0px'
    table.style.borderStyle = 'solid'
    table.id=tid
    for (var k = 0; k < 50; k++) {
        var row = table.insertRow(-1);
        for (var j = 0; j < 50; j++) {
            var cell = row.insertCell(-1);
            cell.style.width = cellwd+'px'
            cell.style.height = cellhg+'px'
            cell.style.borderWidth = '1px'
            cell.style.borderStyle = 'solid'
            cell.style.borderColor = '#cccccc'
            cell.innerHTML = " ";
        }
    }

однако, после выполнения кода браузер начинает дико нагружать процессор и вся страница беспомощно тормозит.
С чем это может быть связано?

firefox 3.5.1

[B~Vladi]

Нельзя клонировать темы

[Bajjy]

прошу прощения, если я сделал гадость. но все-таки прошу помощи по-теме

[B~Vladi]

cell.style.width = cellwd+'px'
cell.style.height = cellhg+'px'
cell.style.borderWidth = '1px'
cell.style.borderStyle = 'solid'
cell.style.borderColor = '#cccccc'

и

table.style.borderCollapse = 'collapse'
table.style.position = "absolute"
table.style.width = xlen*cellwd+'px'
table.style.height = ylen*cellhg+'px'
table.style.borderWidth = '0px'
table.style.borderStyle = 'solid'

Есть большое зло!!! Для таких вещей просто меняем класс, в котором это всё будет прописано.

[Riim]

Для таких вещей просто меняем класс, в котором это всё будет прописано.

Можно еще cssText попробовать.

[B~Vladi]

Можно еще cssText попробовать.

тоже вариант... но думаю для него это будет сложнее

[Bajjy]

спасибо за помощь. сразу следующий вопрос.

stage.timeline = function (source, routx, routy){
for(var i=0; i<ttimeline.length; i++){
var model = document.getElementById(ttimeline[i]);
	model.left-=-model.routx
	model.top-=-model.routy
	model.style.left = model.left+'px'
	model.style.top = model.top+'px'

	if (model.what == 'player') {
		model.src = eval(model.actor+"_"+model.pscen)[model.rmv]
		if (model.rmv == eval(model.actor+"_"+model.pscen).length) 
			model.rmv = 0
		model.rmv++
	}

}
if(usetimer==1)setTimeout(stage.timeline,v_time)
}

var i=1;
stage.new_player_model = function (left, top){
	var onew=document.createElement("img");
	document.getElementById("oworld").appendChild(onew)
	onew.src="sprites/full_plt/looking e0.gif"
	onew.id='b'+i
	onew.width=64
	onew.what="player"
	onew.left=left
	onew.top=top
	onew.actor='full_plt'
	onew.pscen='running_e'
	onew.animations = new Array("running_e")
	onew.wvector='w'
	onew.nvector='n'
	onew.evector='e'
	onew.svector='s'
	onew.vector='e'
	onew.routx='5'
	onew.routy='0'
	onew.rmv='0'
	onew.style.width=onew.width+'px'
	onew.style.position="absolute"
	onew.style.left=onew.left+'px'
	onew.style.top=onew.top+'px'
	onew.timeturn=ttimeline.length
	ttimeline.push(onew.id)
	i++
}

stage.new_player_model добавляет новый объект на страницу и в массив ttimeline, stage.timeline перебирает элементы массива. каждый элемент по-сути - img, stage.timeline меняет src и через определенное время сдвигает элемент. вот только если элементов 5 и больше - начинаются тормоза.
Я так понимаю, что мой код далеко не совершенство.
помогите с оптимизацией, подскажите на что обратить внимание.

[B~Vladi]

При сложном рендеринге + таймауты, избежать тормозов практически невозможно. Вам нужно не код оптимизировать, а визуальную нагрузку на браузер. Иногда простое временное скрытие ненужных элементов может сильно облегчить жизнь браузера.

[B~Vladi]

И ещё совет. Устанавливать свойства нужно ПЕРЕД его вставкой в DOM.

[Riim]

Устанавливать свойства нужно ПЕРЕД его вставкой в DOM.

Вот это иногда очень помогает.