Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   createElement('table') и тормоза (https://javascript.ru/forum/misc/4462-createelement-%27table%27-i-tormoza.html)

Bajjy 23.07.2009 17:46

createElement('table') и тормоза
 
создаю таблицу, в принципе, стандартным методом:
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 23.07.2009 17:47

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

Bajjy 23.07.2009 17:49

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

B~Vladi 23.07.2009 18:22

Цитата:

Сообщение от Bajjy
cell.style.width = cellwd+'px'
cell.style.height = cellhg+'px'
cell.style.borderWidth = '1px'
cell.style.borderStyle = 'solid'
cell.style.borderColor = '#cccccc'

и
Цитата:

Сообщение от Bajjy
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 23.07.2009 18:51

Цитата:

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

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

B~Vladi 23.07.2009 18:53

Цитата:

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

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

Bajjy 24.07.2009 01:42

спасибо за помощь. сразу следующий вопрос.
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 24.07.2009 09:57

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

B~Vladi 24.07.2009 09:58

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

Riim 24.07.2009 10:17

Цитата:

Сообщение от B~Vladi
Устанавливать свойства нужно ПЕРЕД его вставкой в DOM.

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


Часовой пояс GMT +3, время: 00:50.